Question

我正在创建一个简单的Chrome扩展程序，该扩展程序允许用户通过单击突出显示页面上的某些元素。但是，在用户单击链接或加载新内容的任何其他元素的情况下，我希望能够防止点击的传播，从而不会触发链接和带有单击处理程序的任何其他元素。我目前正在使用event.preventDefault()来阻止单击时触发链接，但是event.stopPropagation()不能阻止元素点击处理程序被触发。谁能告诉我为什么会这样吗？

这是我的content.js：

document.addEventListener('click', function (event) {
   event.preventDefault(); //this works for links
   event.stopPropagation(); //this does not work
   some_func_here();
});

在我的background.js脚本中，content.js的加载者是：

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript({file: 'content.js'});
});

非常感谢您！

Answer 1

通常，事件传播会从目标元素冒到document。在事件传播到附加了侦听器的document时，为时已晚，无法停止传播到目标元素和中间元素。

但是，有一个鲜为人知的功能称为“捕获”，在此期间，事件从document向下传播到目标元素。您可以在{capture: true}中使用addEventListener选项，以指示应将处理程序附加到捕获阶段。

如果使用此选项，则可以停止向下传播到元素。

document.addEventListener('click', function (event) {
   event.preventDefault(); //this works for links
   event.stopPropagation(); //this does not work
   some_func_here();
}, {capture: true});

stopPropagation在Chrome扩展程序的内容脚本中不起作用

1 个答案: