如何使用 JavaScript 模拟点击？

IT技术 javascript
2021-01-13 14:11:42

我只是想知道如何使用 JavaScript 来模拟对元素的点击。

目前我有：

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 );
    control.dispatchEvent(evObj);
  }
}

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

但它不起作用:(

有任何想法吗？

6个回答

像这样简单的事情怎么样：

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

IE 也支持。

@Parth 也许是这样，只是没有为他们点击。
2021-03-13 14:11:42
这在以前不存在吗？为什么 2010 的答案没有提到这个简单的解决方案？只是好奇...
2021-03-18 14:11:42
@HermannIngjaldsson 是的，它在 IE 中运行良好 - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
2021-03-27 14:11:42
@NinoŠkopac 目前适用于桌面，但不保证适用于移动浏览器。即使是 mozilla 开发者网站也不显示移动支持。
2021-04-01 14:11:42
问题是“它也适用于 ie 吗？” - 答案是肯定的 - AFAIK 至少下降到 8，还没有检查 7
2021-04-06 14:11:42

这是我做的。这很简单，但它有效：

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

用法：

eventFire(document.getElementById('mytest1'), 'click');
2021-03-16 14:11:42
@Anderson Green：我在这个 jsfiddle 中添加了一个例子：jsfiddle.net/KooiInc/W4BHD
2021-03-22 14:11:42
好吧，我在投票按钮上尝试了您的 java 脚本:)（当然有效）
2021-03-30 14:11:42
证明这有效（在 Chromium 中）：+1 与document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
2021-04-02 14:11:42
要模拟准确的用户行为，您应该用 包装dispatchEvent或click调用setTimeout，因为它看起来dispatchEvent是同步的。
2021-04-06 14:11:42

您是否考虑过使用 jQuery 来避免所有浏览器检测？使用 jQuery，它会很简单：

$("#mytest1").click();
@ErikAigner：我也有同样的疑问，但很高兴在这种情况下接受的答案是纯 JavaScript 而不是 jQuery。在 SO 上看到太多次了。再说一遍：jQuery 是 JavaScript，但 JavaScript 不是 jQuery。尽管我喜欢使用 jQuery，但我发现越来越多的开发人员不了解真正简单的事情。我的 2 美分，忍不住发表评论。;)
2021-03-12 14:11:42
我不知道悲伤，但不必一次又一次地重新编码相同的浏览器检测例程肯定会很方便。
2021-03-18 14:11:42
如果必须用手洗衣服，也有很多人不知道从哪里开始，因为大多数家庭拥有洗衣机，而且几乎同样多的家庭拥有干衣机。jQuery，就像现代电器一样，让旧的杂务变得更容易，更不容易出错。然而，这不是适合所有人的解决方案，但是，使用更简洁、易懂的语法准确回答问题的答案，同时跨浏览器兼容似乎是倒退的。+1。
2021-03-21 14:11:42
@FreeAsInBeer 然后你也不应该走到任何地方，因为开车要容易得多。但我们知道这很愚蠢。如果你不需要走很远，你就走。如果您需要做一些简单的事情并且不想加载整个库来完成它，您可以使用纯 JavaScript。无需为简单的事情浪费气体/带宽。
2021-03-22 14:11:42
这只会触发 jQuery 事件处理程序，而不是默认行为（在这种情况下，浏览器会转到 href）
2021-04-05 14:11:42 
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

参考

如今，简单地做更容易element.click();。大多数主要浏览器都支持这一点。参见stackoverflow.com/a/25806894/470749和stackoverflow.com/a/2381612/470749
2021-03-27 14:11:42
我相信这应该是当今最好的答案
2021-04-06 14:11:42

您可以使用 jQuery 为自己节省大量空间。您只需要使用：

$('#myElement').trigger("click")
通过下载 jquery 节省空间？
2021-03-11 14:11:42
OP 要求提供 JavaScript。尽管它紧凑且功能强大，但有些人更喜欢 no-Library JS 而不是像 jQuery 这样的东西。
2021-03-18 14:11:42
@MH 我认为更有效的论点是“保持简单”。您在 SO 中的默认配置文件与 jQuery 的大小大致相同。
2021-03-19 14:11:42
有些人也喜欢组装。
2021-04-08 14:11:42
其它你可能感兴趣的问题
上一篇如何按值从数组中删除项目？ 下一篇没有散​​列“#”的 AngularJS 路由