javascript - 如何使用纯 Javascript(不使用 Jquery)使用类选择器检测元素外部的点击

Question

I want to detect clicking outside an element using class name as selector

<div id="popOne" class="pop">...</div>
<div id="popTwo" class="pop">...</div>
...
<div id="popLast" class="pop">...</div>


<script>
    var popElement = document.getElementById("pop");
    document.addEventListener('click', function(event) {
        var isClickInside = popElement.contains(event.target);
        if (!isClickInside) {
            alert("Outside");
            //the click was outside the popElement, do something
        }
    });
</script>

Answer 1

作为为每个点击事件迭代所有可能的 .pop 元素的替代方法，只需遍历 DOM 以查看节点或其任何祖先是否具有所需的类:

document.addEventListener('click', function(e) {
    var node = e.target;
    var inside = false;
    while (node) {
        if (node.classList.contains('pop')) {
            inside = true;
            break;
        }
        node = node.parentElement;
    }

   if (!inside) {
       alert('outside');
       // click was outside
   } else {
       alert('inside');
    }
});

这将使性能与 DOM 树的深度相关，而不是 .pop 元素的数量。