e.preventDefault() not working in 100% cases

Question

I'm trying to disable every click events on a web pages.

document.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    let clicked = e.target;
    console.log(clicked);
  });

This is supposed to prevent every click event right? But I still find cases where it is ignored (mostly with links).

What am I missing?

Answer 1

The problem here is at what stage the event is captured by your handler (or intercepted). The code in your question is being executed for events that bubble up to the document (events whose propagation has not been stopped by elements further down the document tree) during the final phase of propagation, not for all events that occur on document (what you are after).

In your case, you effectively want to stop the execution of the event for all descendants during the "capture" phase - look at Section 3.1 - (the first phase of event propagation).

Add true to the call to execute in the capture phase:

document.addEventListener("click", function (e) {
 // ...
}, true);

You should also only need e.stopImmediatePropagation() in your handler.