监听子元素未知标签鼠标事件
时间: 2023-08-02 10:41:35 浏览: 48
如果你不知道子元素的标签名称,可以使用 `event.target` 属性来获取实际触发事件的元素,然后通过遍历该元素的所有父级元素,判断是否存在你想要监听的父级元素。
下面是一个示例代码:
```html
<div id="parent">
<p>段落1</p>
<div>块级元素</div>
<a href="#">链接</a>
</div>
```
```javascript
const parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
let element = event.target;
while (element !== parent) {
if (element.classList.contains('clickable')) {
console.log('可点击元素被点击了:', element.textContent);
break;
}
element = element.parentNode;
}
});
```
在上面的代码中,我们将 click 事件绑定到了父元素 `div` 上,然后在事件处理程序中通过 `event.target` 属性获取实际触发事件的元素。接下来,我们通过 `while` 循环遍历该元素的所有父级元素,判断父级元素是否存在 `clickable` 类名。如果存在,就表示该元素是我们想要监听的元素类型,可以进行相应的处理。如果遍历到了父元素 `div`,仍然没有找到符合条件的元素,就可以退出循环。这样,无论子元素的标签名称如何变化,都可以灵活地监听它们的鼠标事件。