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

更多内容阅读：

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

停止即时传播：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，它已知会导致错误;最好调用一个函数并传递适当的参数。

停止点击事件传播

2 个答案: