使用Chrome的Element Inspector跟蹤添加了事件偵聽器的位置

Question

我想找到將事件偵聽器添加到元素的代碼。 Chrome的Element Inspector可幫助顯示添加了哪些事件，我想找到添加該事件的代碼並將其禁用。

有沒有辦法跳到源代碼中發生事件的位置？

Answer 1

有沒有辦法跳到源代碼中的位置？

您可以 （單擊word document右側帶下划線的jquery.min.js ）。 問題是，它對您沒有太大幫助，因為它將把您帶到jQuery的該元素事件的中央事件處理程序，而不是您要查找的特定處理程序。 jQuery只將給定事件掛接到元素上一次； 如果jQuery附帶有多個處理程序，則它會自行管理它們（這樣就可以確保舊瀏覽器的順序和其他一些功能）。

這將是艱苦的，但是你可以重寫on （其bind以及各種其他的東西最終會調用反正），並在重寫版本設置斷點（過濾您感興趣的事件，以及可選的元素）。 然后運行您的頁面，並在每次遇到斷點時查看調用方。

這是您對on進行基本覆蓋的方法（在加載jQuery之后立即）：

var original = jQuery.fn.on;
jQuery.fn.on = function() {
    /*...your logic here...*/
    return original.apply(this, arguments);
};

...或者在您的jquery.js文件中設置一個斷點（不要嘗試使用縮小版）。

改寫內部jQuery.event.add函數可能會稍微容易一些，因為到那時所有on預處理都已完成：

var original = jQuery.fn.on;
jQuery.event.add = function(elem, types) {
    if ((elem matches the one you care about) &&
        /\bclick\b/i.test(types)) {
        debugger;
    }
    return original.apply(this, arguments);
};

因此，例如，如果您只關心click添加到id="foo"的元素中的操作，則：

var original = jQuery.fn.on;
jQuery.event.add = function(elem, types) {
    if (elem.id === "foo" &&          // `elem` is a DOM element, not a jQuery object
        /\bclick\b/i.test(types)) {
        debugger;
    }
    return original.apply(this, arguments);
};