JS dispatchEvent 不工作

Question

通常我不会在 SO 中提出这种如此具体的问题，但我已经为这个问题苦苦挣扎了好几天，所以我在这里寻求一些帮助。

我正在构建一个应用程序以在网络版 Whatsapp (https://web.whatsapp.com/) 中自动执行任务。我的目标是点击界面上的一个按钮显示一些选项，然后再次点击同一个按钮隐藏它。

模拟我想手动做的事情:

1 - 打开 Whatsapp 网页。

2-点击界面右上角的'Attach'按钮，如下图

3 - 附加选项将显示如下图:

4 - 再次单击 'Attach' 按钮，附加选项将隐藏。

就是这样，但我想使用 Javascript（纯 JS，没有 JQuery）以编程方式执行此操作。

为了完成第 2 步中的任务，我成功地使用了以下代码：

var nodes = document.getElementsByTagName('span');
if (typeof lastElementId == 'undefined')
    var lastElementId = 0;
var result = undefined;
for (var i = 0; i < nodes.length; i++) {
    var h = nodes[i].outerHTML;
    var flag = false;
    flag = (h.toLowerCase().indexOf('data-icon="clip') > -1);
    if (flag) {
        result = h;
        lastElementId = i;
        break;
    }
}
if (result !== undefined) {
    function triggerMouseEvent(node, eventType) {
        var clickEvent = document.createEvent('MouseEvents');
        clickEvent.initEvent(eventType, true, true);
        node.dispatchEvent(clickEvent);
    }
    triggerMouseEvent(nodes[i], "mouseover");
    triggerMouseEvent(nodes[i], "mousedown");
} else {
    console.log('Not found');
}
;

上面的代码可以执行第 2 步，但不能执行第 4 步。当我在选项显示后手动单击附加按钮时，选项将隐藏。但是没有使用我的 JS 代码。

我在这里错过了什么？

提前致谢！

Answer 1

解决关闭问题：

右键单击附加元素。
Select inspect element 在 chrome 浏览器中
在右侧面板 select Event Listeners 选项卡中找到 mousedown 部分
单击处理程序代码并检测到我们需要传递特定的 screenX 和 screenY 来满足这个特定的业务逻辑并传递到 n.uie.requestDismiss() 部分，这显然是按照所说的去做.

所以现在我们有足够的信息来尝试一个可能的解决方案，目前显然可行。是这样的：

const toggleAttach = () => {
  // select the span with reliable identification like data-*
  const clipNode = document.querySelector('[data-icon="clip"]');
  // take its element, i.e. the button itself
  const clipButtonNode = clipNode.parentNode;
  // extract the current offset position relative to the document
  // more info here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  // we can use this for filling in the non-0 screenX and screenY
  const clipButtonNodeClientRect = clipButtonNode.getBoundingClientRect();

  clipButtonNode.dispatchEvent(new MouseEvent("mousedown", {
    bubbles: true,
    cancelable: true,
    screenX: clipButtonNodeClientRect.x,
    screenY: clipButtonNodeClientRect.y
  }));
}

现在了解为什么第一个 mousedown 可以打开：

这很难进行逆向工程，但我设法找到的是，如果你安装 React DevTools（因为 whatsapp web 是用 React 编写的）扩展并在 DevTools 中打开它的选项卡，你会看到：

在那里你会发现：

所以我们可以得出一个非常模糊的结论，即打开和关闭是在不同的函数中处理的。剩下的就看你自己了。

希望对您有所帮助。

JS dispatchEvent 不工作

JS dispatchEvent not working

javascript

google-search-console