JS dispatchEvent不工作

Question

通常我不会提出这样的问题，但是我在这个问题上挣扎了好几天，所以我在这里寻求帮助。

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

要模拟我要手动执行的操作：

1-打开Whatsapp网站。

点击界面右上角的“附加”按钮，如下图所示。

​

​

3-附加选项将显示，如下图所示：

​

​

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

仅此而已，但我想使用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

修复关闭问题的：

1. 右键单击附加元素。
2. 在chrome浏览器中选择inspect element
3. 在右侧面板中，选择Event Listeners选项卡并找到mousedown部分

​

1. 单击处理程序代码并检测到我们需要传递特定的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
  }));
}

现在要理解为什么第一个鼠标向下操作可以打开：

这要比反向工程要难得多，但我设法找到的是，如果您安装了React (因为whatsapp是用see编写的)扩展，然后在DevTools中打开它的选项卡，您将看到：

​

​

在这里你会发现：

​

​

因此，我们可以得出一个非常模糊的结论，即开放和关闭是在不同的函数中处理的。休息是由你自己决定的。

希望这能帮上忙。