如何通过事件委托检测点击类名元素及其内部元素？

我希望检测是否点击了拥有类名“my-class”的元素及其内部任意子元素。例如，我有多个带“my-class”类名的div元素，内部包含按钮、段落、链接等子元素：

<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选择的单个元素且未使用事件委托。

你当前代码的问题在于：event.target指向的是实际被点击的元素，当点击子元素（比如按钮、链接）时，target是这些子元素，它们并不包含my-class类，所以判断条件不成立。

要解决这个问题，可以使用DOM元素的closest()方法，它会从当前元素开始向上遍历DOM树，找到第一个匹配指定选择器的元素（包括当前元素本身）。

修正后的代码： #

document.addEventListener("click", function(event) {
    // 查找最近的包含my-class类的祖先元素（包括自身）
    const clickedContainer = event.target.closest('.my-class');
    if (clickedContainer) {
        // 这里执行你的逻辑代码
        console.log("点击了目标容器或其子元素", clickedContainer);
    }
});

说明： #

• closest('.my-class')会返回第一个匹配.my-class选择器的元素，如果没有找到则返回null。
• 不管点击的是my-class容器本身，还是它内部的任何子元素，这个方法都能定位到对应的容器元素，从而触发你的逻辑。

另外，你原来的代码存在一个语法错误：if条件的括号不完整，应该是if(event.target.classList.contains("my-class"))，不过这不是导致子元素点击无响应的核心问题。

内容的提问来源于stack exchange，提问作者pileup