How can I override JavaScript code injected by my CMS

Question

I want to override a hover event written by Drupal menu. Because I am unable to modify the code written by Drupal, I'd like to know how I can view it and then override it.

Answer 1

You can view how the code works by inspecting the JavaScript includes in the page... I imagine with a CMS like Drupal though, with JavaScript built ontop of jQuery, trying to find exactly where this event is being added will resemble looking for a needle in a haystack.

---

Whilst $('selector').off('eventName'); will work in the basic case (i.e. if an event handler is attached directly to the element), it won't work in the situation where the handler is bound to an ancestor.

To easiest way to fix this is to add your own event to the element and use stopPropagation() to stop event handlers firing that have been bound to ancestors.

$('selector').off('eventName').on('eventName', function (e) {
    e.stopPropagation();
});

... a shorthand for this is to pass false instead of function:

$('selector').off('eventName').on('eventName', false);

For more info see on().