javascript - 为什么 jQuery的triggerHandler()可以工作，而trigger()却不行？

Question

使用 triggerHandler() 单击元素作品:

$element = $('#gwt-debug-location-pill-edit-div:visible');
$element.triggerHandler('click');

但是，使用 trigger() 单击它，不:

$element.trigger('click');

这是为什么？

<小时/>

要复制此内容(在 Firefox 和 Chrome 中):

• 转到https://adwords.google.com/select/home ，然后使用您的凭据登录
• 工具和分析->关键字规划师
• 展开“输入或上传关键字以查看其效果”
• 使用浏览器的控制台，尝试通过上述两种方法单击位置框(在下面的屏幕截图中以红色标记)(您需要将 jQuery 注入(inject)到页面中。我使用 jQuerify 来做到这一点。)

<小时/>

Answer 1

我们来比较一下jQuery.fn.trigger and jQuery.fn.triggerHandler :

trigger: function( type, data ) {
    return this.each(function() {
        jQuery.event.trigger( type, data, this );
    });
},
triggerHandler: function( type, data ) {
    var elem = this[0];
    if ( elem ) {
        return jQuery.event.trigger( type, data, elem, true );
    }
}

唯一真正的区别是第四个参数，true，通过 triggerHandler 赋予 jQuery.event.trigger。

查看jQuery.event.trigger，the argument is called onlyHandlers ，除其他外，the documentation of triggerHandler注意到:

• The .triggerHandler() method does not cause the default behavior of an event to occur (such as a form submission).

我们可以看到where the default behaviour is actually triggered :

// If nobody prevented the default action, do it now
if ( !onlyHandlers && !event.isDefaultPrevented() ) {

如果 onlyHandlers 为 false (trigger())，并且没有事件处理程序停止执行默认事件，则将执行默认操作。

当 onlyHandlers 为 true (triggerHandler()) 时，这种情况永远不会发生。

因此，对于 trigger() 情况，它最终会在目标元素上执行 click()，从而正确触发状态更改 - 但事实证明，在 trigger() 和 triggerHandler() 情况下，在 the loop through the eventPath above 中已经正确触发了点击。 :

// Native handler
handle = ontype && cur[ ontype ];
if ( handle && jQuery.acceptData( cur ) && handle.apply && handle.apply( cur, data ) === false ) {

因此 trigger('click') 最终会单击该元素两次 (!) - 大概是因为 click() 不会返回 false，因此事件默认操作永远不会被阻止 - 而 triggerHandler('click') 只会执行一次。

这可以通过使用检查器单步执行 jQuery.event.trigger 方法并查看选择器打开然后再次关闭来验证。

问题是这是否是我们通常所期望的；在仅 DOM react 的情况下，正常工作的事件触发器会导致双重触发器，这似乎很奇怪。