如何使用 JavaScript 模拟点击？

Question

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

但它不起作用:(

有任何想法吗？

原文由 Belgin Fish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

[ 编辑2022 ]答案确实过时了。对其进行了简化和现代化。

将 element.dispatchEvent 与新创建的所需类型的 Event 一起使用。

这是一个使用 事件委托 的示例。

分叉 这个 stackblitz 项目 来玩它。

 // Note: {bubbles: true} because of the event delegation ...
 document.addEventListener(`click`, handle);
 document.addEventListener(`virtualhover`, handle);

 // the actual 'trigger' function
 const trigger = (el, etype, custom) => {
 const evt = custom ?? new Event( etype, { bubbles: true } );
 el.dispatchEvent( evt );
 };

 // a custom event ;)
 const vHover = new CustomEvent(`virtualhover`,
 { bubbles: true, detail: `red` });

 setTimeout( _ =>
 trigger( document.querySelector(`#testMe`), `click` ), 1000 );

 function handle(evt) {
 if (evt.target.id === `clickTrigger`) {
 trigger(document.querySelector(`#testMe`), `click`);
 }

 if (evt.type === `virtualhover`) {
 evt.target.style.color = evt.detail;
 return setTimeout( _ => evt.target.style.color = ``, 1000 );
 }

 if (evt.target.id === `testMe`) {
 document.querySelector(`#testMeResult`)
 .insertAdjacentHTML(`beforeend`, `<p>One of us clicked #testMe.
 It was <i>${evt.isTrusted ? `<b>you</b>` : `me`}</i>.</p>`);
 trigger(
 document.querySelector(`#testMeResult p:last-child`),
 `virtualhover`,
 vHover );
 }
 }

 body {
 font: 1.2rem/1.5rem verdana, arial;
 margin: 2rem;
 }

 #testMe {
 cursor: pointer;
 }

 p {
 margin: 0.2rem 0;
 }

 <div id="testMe">
 Test me can be clicked
 </div>

 <p><button id='clickTrigger'>Click #testMe</button></p>

 <div id="testMeResult"></div>

旧答案：

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

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

原文由 KooiInc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

简单的事情怎么样：

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

甚至被 IE 支持。

原文由 StudioTime 发布，翻译遵循 CC BY-SA 3.0 许可协议