如何使用JavaScript模拟点击？

Question

我只是想知道如何使用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>

但它不起作用:(

有任何想法吗？

Answer 1

这就是我做的东西.这很简单,但它有效:

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

Answer 2

简单的事情怎么样:

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

IE甚至支持.

Answer 3

您是否考虑过使用jQuery来避免所有浏览器检测？使用jQuery,它将如下所示:

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

Answer 4

你可以使用jQuery为自己节省一大堆空间.你只需要使用:

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

Answer 5

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

参考

• https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
• https://codepen.io/felquis/pen/damDA

Answer 6

在 javascript 中，通过 id 或类名抓取元素，然后应用.click()以使点击发生，如下所示：

document.getElementById("btnHandler").click();

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

Answer 8

模拟事件与创建自定义事件类似。模拟鼠标事件

• 我们必须MouseEvent使用document.createEvent().
• 然后使用initMouseEvent()，我们必须设置将要发生的鼠标事件。
• 然后在您想要模拟事件的元素上调度鼠标事件。

在下面的代码中，我使用了setTimeout1 秒后自动单击按钮的功能。

const div = document.querySelector('div');

div.addEventListener('click', function(e) {
  console.log('Simulated click');
});

const simulatedDivClick = document.createEvent('MouseEvents');

simulatedDivClick.initEvent(
  'click', /* Event type */
  true, /* bubbles */
  true, /* cancelable */
  document.defaultView, /* view */
  0, /* detail */
  0, /* screenx */
  0, /* screeny */
  0, /* clientx */
  0, /* clienty */
  false, /* ctrlKey */
  false, /* altKey */
  false, /* shiftKey */
  0, /* metaKey */
  null, /* button */
  null /* relatedTarget */
);

// Automatically click after 1 second
setTimeout(function() {
  div.dispatchEvent(simulatedDivClick);
}, 1000);

<div> Automatically click </div>