While building an extension, a webpage disabled all eventListeners and disabled eventListeners on my test extension. For example, when the event listner looks like,
element.addEventListener('click', (e) => {
e.stopImmediatePropagation();
console.log('A click event fired.');
});
but the webpage disabled event listener(I can't edit the webpage). As I expect Event.stopImmediatePropagation() fired on all event listeners and keep event listeners from firing events. Like,
let element = document.querySelector('#test');
// From the webpage,
element.addEventListener('click', (e) => {
e.stopImmediatePropagation();
console.log('A click event fired.');
});
// From my test extension,
//this event listener is stopped by e.stopImmediatePropagation();
element.addEventListener('click', (e) => {
console.log('Extension is executed.');
});<div id='test'>
Click me
</div>And I found a question about how to break event.stopImmediatePropagation. But there is only a solution for jQuery.
I want to find how to break stopimmediatepropagation with only javascript. Any comment or answer would be appreciated.
If this really for a click event (or at least a bubbling event), you can add a capturing event handler on the document before any script is ran. This will ensure you'll receive the event.
let element = document.querySelector('#test');
// From the webpage,
element.addEventListener('click', (e) => {
e.stopImmediatePropagation();
console.log('A click event fired.');
});
// From your test extension,
// make it run before the page's scripts
// to be sure to also catch other "captured" events
document.addEventListener('click', (e) => {
if( e.composedPath().includes( element ) ) { // check that 'element' has really been clicked
console.log('Extension is executed.');
}
}, { capture: true }); // catch it in capture phase<div id='test'>
Click me
</div>