為什么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.cn/select/home ，然后使用您的憑據登錄
• 工具和分析->關鍵字規划師
• 展開“輸入或上傳關鍵字以查看其效果”
• 使用瀏覽器的控制台，嘗試通過上面的兩種方法單擊位置框（在下面的屏幕截圖中用紅色標記）（你需要將jQuery注入頁面。我使用jQuerify來做到這一點。）

---

Answer 1

讓我們比較jQuery.fn.trigger和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 ，給jQuery.event.trigger和triggerHandler 。

查看jQuery.event.trigger ， 該參數被稱為onlyHandlers ，除其他外， triggerHandler的文檔指出：

• .triggerHandler（）方法不會導致事件的默認行為（例如表單提交）。

我們可以看到實際觸發默認行為的位置 ：

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

如果onlyHandlers為false（ trigger() ），並且沒有事件處理程序停止執行默認事件，則將執行默認操作。

如果onlyHandlers為true（ triggerHandler() ），則永遠不會發生這種情況。

因此，對於trigger()情況，它最終會在目標元素上執行click() ，這會正確觸發狀態更改 - 但事實證明，在trigger()和triggerHandler()情況下，點擊已經是 通過上面的eventPath在循環中正確啟動：

// 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反應的情況下，否則工作的事件觸發器會導致雙觸發器。