Ensure `click` event is seen by the content script

I’m writing an extension for Chrome that listen and capture the click events made by the user. This is the way I’m capturing the event

document.addEventListener('click', async function (e) {

});

It works good in many cases, but there’re other cases where click event never get triggered, instead there’re one or more focusout events that get triggered. I understad that focusout event may be shooted when javascript changes some like setting value to an hidden input or something like that.

The problem is that I cannot understand why in some cases click event is not triggered. I could think that in moment when the function (the function showed above) is attached to the content there’re some elements that still aren’t attached to the DOM, but I’m not sure and really have not find documentation about. or a way to test it. I’ll be thankfull if somebody can give me a hand with this

Answer

The page element function that listens to a click event can call preventDefault() or stopPropagation() on the event so your listener won’t see it.

Try listening in the first phase of the event, the capturing phase, on the first event target in the propagation chain, window:

window.addEventListener('click', yourFunction, true);

or for the modern browsers:

window.addEventListener('click', yourFunction, {capture: true});

If this one gets canceled as well, you’ll have to do one or both of these two things:

1. declare the content script with “run_at”: “document_start”
2. listen to mousedown event