How to make all page elements not to react on clicks

Question

I'm trying to make an extension with 'pick' functionality: letting the user click on any element on the page and see the xpath for it.

However, to make it usable I have to prevent the element from reacting on clicking: I don't want clicking on hyperlinks to forward me to another page, buttons to submit forms, etc., etc.

How would I do that?

UPD: I need it only for Chrome

Answer 1

The cleanest way in my opinion would be to bind one event handler to body in the capturing phase and prevent the event from propagating/the default behavior.

You can get a reference to the clicked element with event.target:

document.body.addEventListener('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log(event.target);
}, true);

The advantage is that this event handler will be the very first that is triggered, no matter which other event handlers are bound to elements in the page (unless of course the page binds a similar event handler to body, but usually event handlers are bound in the bubbling phase).

For more information see quirksmode.org - Event order and MDN - addEventListener.

DEMO

Answer 2

For a CSS only solution:

* {
    pointer-events: none;
}