停止点击事件传播

Question

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

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

问题是，当用户点击时，会触发很多点击事件，因为每个元素都有 tas 行为，我需要避免取消突出显示。

知道如何改进它或任何替代方案吗？非常感谢！

P/d: 必须是纯JS

Answer 1

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

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();
    });
}

阅读更多内容：

Add Event Listener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Stop Immediate Propagation: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

正如一位勇敢的编辑所说，您还可以将 false 作为第三个参数传递给 addEventListener，它的作用基本相同，但不太容易理解，并且还会做一些额外的事情，所以我选择不默认此设置，因为它更容易理解您正在停止传播。

Answer 2

我制作了一个 jsfiddle：

https://jsfiddle.net/zgqpnaey/

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

function myFunction(element) {
     element.onclick = function(e) { 
        e.preventDefault();
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        element.style.background = 'red';
    };    
}

上面有解释。

此外，您不应在循环内绑定 onclick，这会导致错误；最好调用一个函数并传递适当的参数。

停止点击事件传播

Stop click event propagation

javascript

dom