javascript - 如何在 javascript 上打破 event.stopImmediatePropagation

Question

在构建扩展程序时，网页禁用了我的测试扩展程序上的所有eventListeners 和 disabled s。eventListener例如，当事件监听器看起来像时，

element.addEventListener('click', (e) => {
 e.stopImmediatePropagation();
 console.log('A click event fired.');
});

但是网页禁用了事件监听器（我无法编辑网页）。正如我所期望的那样， Event.stopImmediatePropagation()会在所有事件侦听器上触发，并防止事件侦听器触发事件​​。喜欢，

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>

我发现了一个关于如何打破 event.stopImmediatePropagation的问题。但是只有 jQuery 的解决方案。

我想找到如何stopimmediatepropagation只使用 javascript 来破解。任何评论或答案将不胜感激。

标签： javascripthtmleventsgoogle-chrome-extensionaddeventlistener

Answer 1

如果这确实是针对单击事件（或至少是冒泡事件），您可以在运行任何脚本之前在文档上添加捕获事件处理程序。这将确保您收到该事件。

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>