Chrome 控制台 .click() 在一个网站上工作，但不在另一个网站上。为什么以及如何？

Question

当我打开 Facebook 的 messenger.com 并在控制台中运行 document.getElementsByClassName('_1htf')[2].click(); 时，它会跳转到对话并打开它。 _1htf 是我随机选择的一个类，每个对话条目都包含这个类。

在web.whatsapp.com 上执行相同操作以访问对话，没有任何反应。我什至不能click()这个网站上的“真实”按钮。

我真的不明白为什么这在第一个网站上有效，但在第二个网站上无效。

我能够指出两个网站之间的差异：

• web.whatsapp.com 阻止浏览器的鼠标右键上下文菜单并用自定义菜单覆盖它 - messenger.com 不会这样做

• messenger.com 的_1htf 元素包含一个URI，该URI 会导致对话（您可以在新选项卡中打开uri 并结束对话）- web.whatsapp.com' s 元素不包含链接，但在单击时仍以某种方式打开对话

这是如何实现的？是否有一些 Javascript 监听鼠标事件？ 如果是这样，我该如何触发事件？我真的需要以编程方式“点击”对话。

这是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>

更新：我尝试触发 Chrome 开发控制台 > 元素 > 事件侦听器中列出的许多事件，但似乎都不起作用，它只输出 ƒ focus() { [native code] } 但不会跳转到对话。

谢谢

Answer 1

Whatsapp 可能会阻止不受信任的点击。

要查看我在说什么，首先在控制台中输入：

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

现在，尝试单击页面上的任意位置。现在应该在控制台中显示true。

如果你尝试做这样的事情：

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

那么isTrusted 将是假的，因为它不是真正的点击。

据我所知，您无法欺骗该值，因此您必须找到一种不同的方式来做您想做的事情（尝试检查您所点击的任何点击/鼠标按下事件处理程序，以及看看能不能直接调用一些函数）。