Intercept (and perhaps cancel) page's mouse/keyboard event handlers

Question

I'm trying to create a Chrome Extension that deals with selected text. Some website pages' otherwise selectable text content has click/mouse-up/down event handlers that navigate to a new page.

Is there a way from the background or content script to temporarily disable (and restore) the page's arbitrary event handlers without interfering with the native text selection?

Worst case I'm thinking of is to detach, clone the body html, allow the selection, and then restore the bound original. Seems like trouble.

Thanks!

Answer 1

Most HTML DOM events follow the capture-target-bubble event model. This means, for example, that if you click on a button, that the "click" event is first dispatched at the root, all the way down to the button, then back up. Event propagation can be stopped, which prevents the event listener at the next level from being notified of the event.

The earliest possibility of receiving the event is at the root, often window at the capture phase. To bind an event listener to the capture phase, use addEventListener with the third parameter set to true:

// in a content script, at run_at:document_start
window.addEventListener('click', function(event) {
    event.stopImmediatePropagation();
}, true);

Many web pages use jQuery to manage DOM events, which binds the event listeners at the bubbling phase, so the previous method will work on most sites. If the page does not use jQuery, then you have to bind your event listener at document_start to make sure that your event listener is triggered before every other event listener.