停止点击事件传播 [英] Stop click event propagation

问题描述

我试图在用户单击某个网页时突出显示该网页的任何DOM元素。为此，我遍历当前元素的所有元素并禁用任何功能（例如，我可以单击而不进行重定向）：

I'm trying to highlight any DOM element of a certain Web page when the user clicks on it. For that purpose, I iterate through all elements of the current element and disable any functionality (so e.g. I can click and not to be redirected):

var elems = window.document.getElementsByTagName('*');
for (var i = 0; i < elems.length; i++) {
    elems[i].onclick = function(e){ 
        e.preventDefault();
}

问题是，当用户单击时，会触发很多点击事件，因为每个元素都有tas行为，所以我需要避免引起人们的注意。

The thing is, when user clicks, a lot of click events are fired, because every element has tas behaviour, and I need to avoid unhighlight.

有什么想法可以改善它或任何其他选择？
非常感谢！

Any idea of how to improve that or any alternative? Thanks a lot!

P / d：必须是纯JS

P/d: It has to be pure JS

推荐答案

您需要做两件事：首先，您要实际添加一个事件，而不是重新定义其点击行为，其次，您希望它不要通过dom 起泡。试试：

You'll need to do two things: first of all, you want to actually add an event, not redefine its click behaviour, and secondly, uou want it to not bubble up through the dom. Try this:

var elems = window.document.getElementsByTagName('*');
for (var i = 0; i < elems.length; i++) {
    // Use addEventListener to listen for events.
    // Older version of IE use attachEvent, but I guess thats irrelevant.
    elems[i].addEventListener("click", function(e){
        e.preventDefault();
        // Use stopImmediatePropagation to stop the element from passing this click to wrapping parents - because a click on a child is technically a click on the parent as well.
        e.stopImmediatePropagation();
    });
}

更多内容请阅读：

添加事件监听器： https：//developer.mozilla .org / zh-CN / docs / Web / API / EventTarget / addEventListener

停止立即传播： https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

正如勇敢的编辑所说，您也可以将 false 作为第三个参数传递给 addEventListener ，它的功能基本相同，但可理解性较低，并且还执行其他一些操作，因此我选择不默认设置，因为它更容易理解您正在停止传播

As a brave editor says, you can also pass false as a third argument to the addEventListener and it does basically the same thing but is less comprehensible and does some additional things as well, so I have opted not to default to this just because its easier to understand that you are stopping propagation.

这篇关于停止点击事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！