如何在 JavaScript 中模拟点击：'click()”与'dispatchEvent()”？-js教程-PHP中文网

如何在 JavaScript 中模拟点击：'click()”与'dispatchEvent()”？

Mary-Kate Olsen

发布： 2024-12-04 06:30:15

原创

679 人浏览过

How to Simulate Clicks in JavaScript: `click()` vs. `dispatchEvent()`?

在 JavaScript 中模拟点击：指南

使用 JavaScript 模拟元素点击是 Web 开发中的一项常见任务。这可以通过多种方式完成，具体取决于浏览器兼容性要求。

使用 click() 方法（仅限 IE）

在 Internet Explorer 中，您可以使用直接在要触发点击事件的元素上使用 click() 方法：

document.getElementById('btn').click();

登录后复制

使用dispatchEvent() 方法（现代浏览器）

对于现代浏览器，您可以使用dispatchEvent() 方法创建自定义鼠标单击事件并将其分派给元素：

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
document.getElementById('btn').dispatchEvent(evObj);

登录后复制

为什么您的代码不起作用

问题中提供的代码不起作用，因为SimulateClick() 函数缺少一个重要的细节。 MouseEvents API 中的 initMouseEvent() 方法需要设置 clientX 和 clientY 属性，这两个属性指定在浏览器窗口中单击的位置。

修订的代码

要解决此问题，请添加以下代码来设置 clientX 和 clientY 属性：

evObj.clientX = 0;
evObj.clientY = 0;

登录后复制

The更新后的代码将如下所示：

function simulateClick(control) {
  if (document.all) {
    control.click();
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
    evObj.clientX = 0;
    evObj.clientY = 0;
    control.dispatchEvent(evObj);
  }
}

登录后复制

现在应该成功模拟对 ID 为“mytest1”的元素的点击。

以上是如何在 JavaScript 中模拟点击：'click()”与'dispatchEvent()”？的详细内容。更多信息请关注PHP中文网其他相关文章！