如何使用JavaScript模拟点击?

2020/10/04 10:21 · javascript ·  · 0评论

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

但这不起作用:(

有任何想法吗?

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

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

那么简单的事情呢:

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

甚至由IE支持

您是否考虑过使用jQuery避免所有浏览器检测?使用jQuery,它将非常简单:

$("#mytest1").click();
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.
}

参考

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

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

最好的答案是最好的!但是,当时,它并没有在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.
    } 
  }
}
document.getElementById('elementId').dispatchEvent(new MouseEvent("click",{bubbles: true, cancellable: true}));

单击此链接可了解使用Javascript和浏览器兼容性的鼠标事件

https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent#Browser_compatibility

这没有很好的记录,但是我们可以非常简单地触发任何类型的事件。

此示例将触发50双击按钮:

let theclick = new Event("dblclick")

for (let i = 0;i < 50;i++){
  action.dispatchEvent(theclick) 
}
<button id="action" ondblclick="out.innerHTML+='Wtf '">TEST</button>
<div id="out"></div>

Event接口表示在DOM中发生的事件。

事件可以由用户操作触发,例如单击鼠标按钮或敲击键盘,也可以由API生成以表示异步任务的进度。也可以通过编程方式触发它,例如,通过调用元素的HTMLElement.click()方法或定义事件,然后使用EventTarget.dispatchEvent()将其发送到指定的目标。

https://developer.mozilla.org/zh-CN/docs/Web/API/Event

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptmonidianji.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!