17

I know you can see the event listeners in the Chrome Inspector but i'm doing some debugging work and there are so many event listeners lying around I'd like to disable some without editing the code

enter image description here

Is there a way to disable an event listener quickly from the Webkit inspector?

Perhaps have a look and type some code into the console to removeEventListener the listener? How would I do this? For instance how would i remove the 'click' listener above

jordanbtucker
  • 4,772
  • 1
  • 27
  • 42
Tarang
  • 72,789
  • 35
  • 206
  • 268

5 Answers5

13

You can use getEventListeners(element).click[index].listener to get a reference to a listener (in a WebKit console).

So, to remove the first listener, you could do:

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

Similarly, to remove all listeners, you could use this function:

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))
Jackson
  • 7,927
  • 4
  • 42
  • 65
4

Sorry, you are out of luck (at least for the time being.) removeEventListener requires the exact listener Function object as an argument, and DevTools do not let you get a grip of the listener function in any way.

If you definitely need this feature, please file a bug at http://new.crbug.com (against Chrome) or http://bugs.webkit.org (against WebKit, the preferred way).

Alexander Pavlov
  • 29,538
  • 4
  • 63
  • 88
  • 1
    @Jackson's answer below works in chrome as of 2017. https://stackoverflow.com/a/32191966/2661831 – Josiah Sep 01 '17 at 12:49
3

You can remove an event listener in the javascript console. First find the element to which this event listener is attached. Let's call it e. Then you execute: e.onclick=null. For example, many event listeners are attached to "body", then the above code becomes： document.body.onclick=null. After that the event listener is removed.

Shaohua Li
  • 335
  • 2
  • 7
  • Just tried what you suggested and it didn't work when creating an event listener with: document.body.addEventListener('click', function() { console.log('clicked'); }); – d48 Mar 13 '15 at 18:18
  • 1
    yeah you are right. My tests didn't cover all cases. Seems the correct answer is in here: http://stackoverflow.com/questions/4919079/remove-all-onclick-events-for-an-element – Shaohua Li Mar 15 '15 at 11:57
2

Maybe late but.

In chrome there is a specific button to remove the method call of a specific event.

Right click on the html input (boutton in my example) inspect element, chrome opens the element viewer tab (in html mode) with another panel composed of subtabs in this panel click on the "event listener" tab and unfold the event you're intersted in (onclick in my example) put the mouse point over the name of the button you inspected and a button "remove" will apear and one clicked the event listener is deleted for the current page loaded.

Et voilà

Akyo
  • 129
  • 1
  • 11
  • but what if this line with the name of the class is too long? it seems that this Remove word is way too far to see it. is there any hint on how to make this Remove word visible even fro super-long names of elements? – Vadim Anisimov May 16 '19 at 06:40
1

Simply:

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

This works with other elements, too:

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

And other types of events:

getEventListeners($('#login-form')[0]).submit[0].remove()
jordanbtucker
  • 4,772
  • 1
  • 27
  • 42