如何使用JavaScript模拟点击?


290

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

目前我有:

<script type="text/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);
    }
}
</script>

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

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

但这不起作用:(

有任何想法吗?


9
“五个最常见的编码错误”:javascript.about.com/od/hintsandtips/a/worst_4.htm-几乎没有人再运行IE4,因此不再支持该文档。不再需要所有DOM。尽管仍然有很多人在编码中使用它,这确实令人惊讶。更糟糕的是对文档的支持。通常会测试所有DOM以确定是否使用了浏览器,如果支持,则代码会假定浏览器是Internet Explorer(这是完全错误的用法,因为Opera也可以识别DOM) 。
zaf 2010年

Answers:


416

这是我煮的 这很简单,但是有效:

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');

12
@Anderson Green:我已经为此jsfiddle添加了一个示例:jsfiddle.net/KooiInc/W4BHD
KooiInc 2013年

4
证明有效的方法(在Chromium中):+ 1,document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
PointedEars 2014年

57
好吧,我想你的java脚本上投了按钮:)(中-当然的了)
0fnt

1
要模拟确切的用户行为,您应该将dispatchEventclick调用包装为setTimeout,因为它看起来dispatchEventsync
列夫·


390

那么简单的事情呢:

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

甚至由IE 支持



6
问题是“它是否也起作用?” -答案是肯定的-AFAIK至少降至8,没有检查7-
达伦·斯威尼

24
以前不存在吗?为什么2010年的答案没有提到这个简单的解决方案?只是好奇...
Parth 2016年

3
@NinoŠkopac目前非常适合台式机,但不能保证与移动浏览器一起使用。甚至mozilla开发人员网站也没有显示移动支持。
le0diaz '16

7
@Parth也许是这样,只是没有点击它们。
Andrew

78

您是否考虑过使用jQuery来避免所有浏览器检测?使用jQuery,它就像这样简单:

$("#mytest1").click();

21
这只会触发jQuery事件处理程序,而不触发默认行为(在这种情况下浏览器将转到href)
Romuald Brunet 2012年

12
我不知道难过,但是不必反复编码相同的浏览器检测例程,这肯定会很方便。
BradBrening

9
@ErikAigner:我也想知道,但很高兴在这种情况下可接受的答案是纯JavaScript而不是jQuery。在SO上看到太多次了。再一次:jQuery是JavaScript,但JavaScript不是jQuery。尽管我喜欢使用jQuery,但我发现越来越多的开发人员不了解真正的朴素事物。我的2美分,无法抗拒置评。;)
Sander

58
还有很多人不知道从哪里开始洗衣服,因为大多数家庭拥有洗衣机,几乎有许多人拥有干衣机。jQuery就像现代设备一样,使旧的工作变得更加轻松,并且不易出错。但是,这并不是每个人都可以解决的问题,在使用跨浏览器兼容的同时,使用更简洁,更易理解的语法来降低答案的准确性,从而准确地回答问题。+1。
FreeAsInBeer 2013年

2
@FreeAsInBeer然后,您也不应走到任何地方,因为驾驶非常容易。但是我们知道这很愚蠢。如果您不需要走远,您可以步行。如果您需要执行简单的操作并且不想加载整个库来执行此操作,则可以使用普通的JavaScript。无需为了简单的事情而浪费精力。
雅各布•阿尔瓦雷斯

18
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.
}

参考


我相信这应该是当今最好的答案
DavidTaubmann

15

您可以使用jQuery节省一堆空间。您只需要使用:

$('#myElement').trigger("click")

10
OP要求使用JavaScript。尽管它紧凑且功能强大,但有些人还是喜欢无库JS,而不是jQuery。
尸体

43
通过下载jquery节省空间?
MH

9
有些人也喜欢组装。
Dan Nissenbaum '16

@MH我认为一个更有效的论点是“保持简单”。SO中的默认配置文件与jQuery的大小大致相同。
adelriosantiago

7

最好的答案是最好的!但是,当时,它并没有在Firefox中为我触发鼠标事件etype = 'click'

所以,我改变了document.createEvent'MouseEvents'和解决了这一问题。额外的代码用于测试是否有其他代码干扰了该事件,如果取消了该代码,则将其记录到控制台。

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.