js防止事件穿透
时间: 2023-07-30 19:04:23 浏览: 58
防止事件穿透通常使用以下方法:
1. stopPropagation():阻止事件冒泡到父元素,即在子元素上使用该方法。
2. preventDefault():阻止事件的默认行为,例如点击链接时阻止跳转。
3. pointer-events:CSS属性,可以设置元素是否能够被鼠标事件触发,可以设置为 none 来禁止鼠标事件。
示例代码:
```html
<div class="parent">
<div class="child">
<button>Click Me</button>
</div>
</div>
```
```css
.parent {
background-color: #f5f5f5;
padding: 20px;
}
.child {
background-color: #fff;
padding: 10px;
pointer-events: none;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px;
}
button:hover {
background-color: #0069d9;
cursor: pointer;
}
```
```javascript
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
event.stopPropagation();
console.log('Button clicked!');
});
```
在上面的示例中,我们使用了 pointer-events 属性来禁止子元素 .child 上的鼠标事件。当然,你也可以使用 stopPropagation() 方法来防止事件冒泡。