javascript - JS dispatchEvent 不工作

Question

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

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

模拟我想手动做的事情:

1 - 打开 Whatsapp 网页版。

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

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 部分
4. 单击处理程序代码并检测到我们需要传递特定的 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 中打开它的选项卡，你将看到:

在那里你会发现:

因此我们可以得出一个非常模糊的结论，即打开和关闭是在单独的函数中处理的。剩下的由您自己决定。

希望这对您有所帮助。