检测具有委托的元素内部的单击以及何时通过其类名称选择该元素

Question

如何检测单击是否位于其侦听器被类选择的元素内部？

例如，我有一些类名为“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 选择且没有委托的单个元素： Detect click inside/outside of element with single event handler

Answer 1

使用

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>