Javascript 检测带有委托的元素内部的点击，以及元素何时按其类名被选中

发布于01月09日

我如何才能检测到点击是否在某个元素内部，该元素的侦听器是由一个类 Select 的？

例如，我有几个类名为"my-class"的元素:

<div class="my-class">
    <button>Hello</button>
    <p>World</p>
</div>
<div class="my-class">
    <a href="">Click</a>
    <a href="">Here</a>
</div>

如果我只听这个类，如果点击内部元素，它就不会起作用:

document.addEventListener("click", function(event) {
    if(event.target.classList.contains("my-class") {
        // 
    }
});

我怎样才能检测到点击里面的任何元素呢？

我发现了以下问题，但它只适用于由id Select 的单个元素，并且没有委托:Detect click inside/outside of element with single event handler

推荐答案

使用Element::closest()判断my-class或my-class内部单击的元素本身:

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest个

document.addEventListener("click", function(event) {
    if(event.target.closest(".my-class")) {
        console.log('my-class clicked!');
    }
    event.preventDefault();
});

<div class="my-class">
    <button>Hello</button>
    <p>World</p>
</div>
<div class="my-class">
    <a href="">Click</a>
    <a href="">Here</a>
</div>