使用 Chrome 的 webkit 检查器删除事件侦听器

Posted 2023-03-06

【中文标题】使用 Chrome 的 webkit 检查器删除事件侦听器

【英文标题】：Use Chrome's webkit inspector to remove an event listener

【发布时间】：2012-06-16 08:31:57

【问题描述】：

我知道您可以在 Chrome Inspector 中看到事件侦听器，但我正在做一些调试工作，周围有很多事件侦听器，我想在不编辑代码的情况下禁用一些事件侦听器

有没有办法从 Webkit 检查器中快速禁用事件侦听器？

也许看看并在控制台中输入一些代码给removeEventListener监听器？我该怎么做？例如，我将如何删除上面的“点击”侦听器

【参考方案1】：

抱歉，您不走运（至少暂时如此。）removeEventListener 需要确切的侦听器函数对象作为参数，而 DevTools 不允许您以任何方式掌握侦听器函数。

如果您确实需要此功能，请在http://new.crbug.com（针对 Chrome）或http://bugs.webkit.org（针对 WebKit，首选方式）提交错误。

【讨论】：

@Jackson 的回答自 2017 年起在 chrome 中有效。***.com/a/32191966/2661831

【参考方案2】：

您可以在 javascript 控制台中删除事件侦听器。 首先找到此事件侦听器附加到的元素。让我们称之为e。然后你执行： e.onclick=null。 比如很多事件监听器都附加在“body”上，那么上面的代码就变成了： document.body.onclick=null。 之后，事件监听器被移除。

【讨论】：

刚刚尝试了您的建议，但在创建事件侦听器时不起作用： document.body.addEventListener('click', function() console.log('clicked'); );

是的，你是对的。我的测试并未涵盖所有情况。似乎正确的答案在这里：***.com/questions/4919079/…

【参考方案3】：

您可以使用 getEventListeners(element).click[index].listener 获取对侦听器的引用（在 WebKit 控制台中）。

因此，要删除第一个侦听器，您可以这样做：

document.removeEventListener('click', getEventListeners(document).click[0].listener)

同样，要移除所有的监听器，你可以使用这个函数：

function removeEventListeners(element, listenerMap) 
    Object.keys(listenerMap).forEach(function (name) 
        var listeners = listenerMap[name];
        listeners.forEach(function (object) 
            element.removeEventListener(name, object.listener);
        );
    );


removeEventListeners(document, getEventListeners(document))

【讨论】：

这是一个很好的答案。请注意，您可能必须使用 window 而不是 document 来调用它。

【参考方案4】：

简单地说：

getEventListeners(document).click[0].remove()

这也适用于其他元素：

getEventListeners($('#submit-button')[0]).click[0].remove()

以及其他类型的事件：

getEventListeners($('#login-form')[0]).submit[0].remove()

【讨论】：

Remove 不是监听器对象的方法。

【参考方案5】：

也许迟到了，但是。

在 chrome 中有一个特定的按钮来删除特定事件的方法调用。

右键单击 html 输入（在我的示例中为按钮）检查元素，chrome 打开元素查看器选项卡（在 html 模式下），另一个面板由该面板中的子选项卡组成，单击“事件侦听器”选项卡并展开事件您感兴趣（在我的示例中为 onclick）将鼠标点放在您检查的按钮的名称上，然后会出现一个“删除”按钮，单击事件侦听器会为当前加载的页面删除。

【讨论】：

但是如果这个类名的行太长怎么办？看来这个删除词太远了，看不到它。有没有关于如何使这个 Remove 字即使对于超长的元素名称可见的提示？