Jquery dispatchEvent 包装方法答案

【问题标题】：Jquery dispatchEvent wrapper methodJquery dispatchEvent 包装方法
【发布时间】：2013-09-16 08:49:14
【问题描述】：

jquery 中是否有用于 dispatchEvent 的包装方法或库？我一直在stackoverflow上寻找这个，但我找到的最接近的方法是jquery的trigger()，它似乎只触发jquery事件监听器。我当然可以自己使用 dispatchEvent，但我想使用 jquery 来使我的代码更易于阅读。

我正在编写一个greasemonkey 脚本，我想在其中向某个匿名事件侦听器触发一个事件。页面本身不是用 jquery 编写的。

这是一个 jsfiddle 链接来解释我想要完成的事情：https://jsfiddle.net/Zx3CA/

js:

function log(s){
    document.getElementById('log').innerHTML+=s+'<br/>';
}

$(function(){
    //code on the page, which shouldn't be changed
    //start
    document.getElementById('link').addEventListener('click',function(){
        log('click detected');
    },false);
    //end
    
    $('#triggerClickJQuery').on('click',function(){
        $('#link').trigger('click');
    });
    
    $('#triggerClickJS').on('click',function(){
        var event=document.createEvent('MouseEvents');
        event.initMouseEvent('click',true,true,null,-1,-1,-1,-1,0,true,false,false,true,0,null);
        $('#link').get(0).dispatchEvent(event);
    });
});

html:

<body>

<a id="link" href="javascript:void(0);">Link</a><br/>
<a id="triggerClickJQuery" href="javascript:void(0);">Trigger Click JQuery</a><br/>
<a id="triggerClickJS" href="javascript:void(0);">Trigger Click JavaScript</a><br/>

<div id="log"></div>

</body>

提前致谢。

【问题讨论】：

标签： javascript jquery html events

【解决方案1】：

在 custom 事件的 jQuery（最高 1.10.1）中实现 trigger 不会触发本机事件，因此您将无法通过 addEventListener 或同一页面上加载了不同版本的jQuery。

此错误及其所有用例都在此处详细记录：http://bugs.jquery.com/ticket/11047

您可以使用plugin 作为解决方案，它会检查浏览器是否支持触发自定义本机事件并在可用时使用它。

https://github.com/sandeep45/betterTrigger

【讨论】：

我正在使用 jquery 2.0.3，看起来 bug 仍然存在。这也适用于点击事件，谢谢你写这篇文章。