js 在一个dom元素中找某个类名的子容器,监听它是否有被点击,代码怎么实现?
时间: 2024-03-01 12:56:09 浏览: 229
如何用js判断dom是否有存在某class的值
可以使用事件委托的方式来实现在一个DOM元素中找到某个类名的子容器,并监听它的点击事件。
假设我们有一个父级元素container,其中包含多个子元素,我们要找到类名为child的子元素,并监听它的点击事件:
```html
<div id="container">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
<div class="other">其他元素</div>
</div>
```
我们可以使用以下JavaScript代码来实现:
```javascript
var container = document.getElementById("container");
container.addEventListener("click", function(event) {
// 判断是否为类名为child的子元素
if (event.target.classList.contains("child")) {
console.log("子元素被点击了");
}
});
```
在上述代码中,我们使用addEventListener方法为container元素添加了一个click事件的监听器。当用户点击container元素中的任意子元素时,监听器会判断该子元素是否为类名为child的元素,如果是,则输出"子元素被点击了"。
需要注意的是,这种方式只能用于监听子元素的冒泡事件,如果子元素的点击事件被阻止了冒泡,那么该方式就无法监听到该事件。
阅读全文