如何阻止js事件的传播和穿透(冒泡和捕获)
最编程
2024-01-11 10:58:24
...
阻止事件传播
阻止事件传播的代码在最下面
//代码1
//在下面的代码中,我需要添加一个全局事件,但是改全局事件不能包括imitationSelect,
imitationSelect.onclick= function(){
if(selectUl.style.display=="block"){
selectUl.style.display='none';
}else{
selectUl.style.display='block';
};
if(fa.className=="fa fa-caret-up"){
fa.className='fa fa-caret-down';
}else{
fa.className='fa fa-caret-up';
};
// fa.className='fa fa-caret-up';
if(window.event){
//if(window.event)即当触发事件时执行函数,单个对象时候可以不判断,但当对象多的时候可能会出bug
//阻止事件传播,事件从点击的元素出发,向外(window)传播
window.event.cancelBubble = true;
}
}
document.onclick=function(){
//全局(除了imitationSelect)绑定点击事件
fa.className='fa fa-caret-down'; //箭头样式
selectUl.style.display='none';
show(liArr);
}
实现我们先来了解一下js的捕获和冒泡事件
以下为我的浅显理解(仅供参考)
捕获事件
即从顶层元素向下直至目标元素,这个顶层元素包括document,甚至是window。
冒泡事件
即从目标元素向上直至顶层元素,顶层元素同上。
在w3c事件模型中
任何W3C事件模型中发生的事件都是先捕获,直到它到达目标元素,然后再向外冒泡。(即上图从右到左执行 顺序为: 3 2 1 2 3)
而我们所写的事件会在捕获过程或者冒泡过程中触发,而我们通常用addEventListener来绑定元素,但实际上addEventListener还有第3个参数,即控制事件是在冒泡过程还是捕获过程中触发。
这个参数名字为useCapture,类型为布尔值(true false),false为冒泡过程触发,true为捕获过程触发,默认为false。
值得一提的是onclick等绑定方法默认值也是在冒泡过程中触发的
//冒泡捕获具体的例子
//代码2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冒泡与捕获</title>
</head>
<style>
div{
width: 50px;
height: 50px
上一篇: 如何阻止Echarts鼠标事件的冒泡
下一篇: js实现阻止冒泡的两种方式