Chome console .click() working on one website, but not on another website. Why and how?

问题

When I open Facebook's messenger.com and run document.getElementsByClassName('_1htf')[2].click(); in the console, it jumps to a conversation and opens it. _1htf is a random class that I picked, every conversation entry contains this class.

Doing the same on web.whatsapp.com to access a conversation, nothing happens. I can't even click() the "real" buttons on this website.

I don't really understand why this works on the first, but does not work on the second website.

There are 2 differences between the websites that I was able to point out:

web.whatsapp.com blocks the browser's right-mouse button context menu and overrides it with a custom one - messenger.com doesn't do that
messenger.com's _1htf elements contain an URI that leads to the conversation (you can open the uri in a new tab and end up in the conversation) - web.whatsapp.com's elements do not contain a link but somehow still open the conversation when clicked

How is this achieved? Is there some Javascript listening to mouse events? If so, how can I trigger the event? I really need to "click" the conversation programmatically.

This is how one conversation entry looks in web.whatsapp.com

<div class="infinite-list-item infinite-list-item-transition" style="z-index: 200; height: 72px; transform: translateY(144px);">
    <div tabindex="-1" class="chat-drag-cover">
        <div class="active chat hover">
            <div class="chat-avatar">
                <div class="avatar icon-user-default">
                    <div class="avatar-body" style="cursor: pointer;"><img src="https://dyn.web.whatsapp.com/pp?t=s&amp;u=4 . . . " draggable="false" class="avatar-image is-loaded"></div>
                </div>
            </div>
            <div class="chat-body">
                <div class="chat-main">
                    <div class="chat-title"><span class="emojitext ellipsify" dir="auto" title="CONVERSATION PARTNER"><!-- react-text: 92 -->CONVERSATION PARTNER<!-- /react-text --></span></div>
                    <div class="chat-meta"><span class="timestamp">21:16</span></div>
                </div>
                <div class="chat-secondary">
                    <div class="chat-status"><span class="last-msg" title="CONVERSATION MESSAGE"><span class="emojitext" dir="ltr"><!-- react-text: 28843 -->CONVERSATION MESSAGE<!-- /react-text --></span></span>
                    </div>
                    <div class="chat-meta"><span></span><span></span><span class="context-container"><div data-icon="down" role="button" class="img btn-context" style="width: 20px; opacity: 1;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" width="21" height="21"><path fill-opacity=".31" d="M4.8 6.1l5.7 5.7 5.7-5.7 1.6 1.6-7.3 7.2-7.3-7.2 1.6-1.6z"></path></svg></div></span></div>
                </div>
            </div>
        </div>
    </div>
</div>

Update: I tried to trigger numerous events listed in Chrome Dev Console > Elements > Event Listeners but non of that seems to work, it only outputs ƒ focus() { [native code] } but doesn't jump to the conversation.

Thanks

回答1:

Whatsapp probably blocks untrusted clicks.

To see what I'm talking about, first type this into the console:

document.onclick = (e) => { console.log(e.isTrusted) };

Now, try clicking anywhere on the page. It should show true in the console now.

If you try doing something like this:

document.getElementsByTagName('a')[0].click();

then isTrusted will be false, since it's not a real click.

As far as I know, you can't spoof the value, so you'll have to find out a different way to do what you want (try inspecting any click/mousedown event handlers on what you're clicking, and see if you can call some functions directly).

来源：https://stackoverflow.com/questions/45700198/chome-console-click-working-on-one-website-but-not-on-another-website-why-a

标签

javascript

jquery

html

google-chrome-console