主页 / coding / 问题 / 77786858
Accepted
pileup
Asked: 2024-01-09 20:43:24 +0800 CST

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

  • 772

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

例如，我有一些类名为“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

javascript

1 个回答

  1. Best Answer

    用于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>

    • 2

相关问题