事件冒泡:
当一个元素上的事件被触发的时候,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)
例如:比如说鼠标点击了一个按钮,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作;但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。
取消冒泡
就是取消这种机制。
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
兼容性代码
var e=(event)?event:window.event; //先判断浏览器的类型
if (window.event) {
e.cancelBubble=true;// 在基于ie内核的浏览器中的使用cancelBubble
} else {
e.stopPropagation(); //在基于firefox内核的浏览器中支持做法stopPropagation
}
具体示例如下:
<html>
<head>
<title> js中的冒泡事件以及如何阻止冒泡</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function preventBubble (obj,event) {
alert(obj.id);
var e=(event)?event:window.event; //先判断浏览器的类型
if (window.event) {
e.cancelBubble=true;// 在基于ie内核的浏览器中的使用cancelBubble
} else {
e.stopPropagation(); //在基于firefox内核的浏览器中支持做法stopPropagation
}
}
</script>
<style>
.parent{
width:200px;
height:200px;
background-color:yellow;
text-align:center;
display:flex;
align-items: center;
}
.parent:last-child{
margin-top:20px;
background-color:gray;
}
.child{
width:100px;
height:100px;
background-color:orange;
margin:0 auto;
}
</style>
</head>
<body>
<!--这里点击子元素child1,触发子元素方法的同时还会触发父元素的方法-->
<div id="parent1" onclick="alert(this.id)" class="parent">parent1
<div id="child1" onclick="alert(this.id)" class="child">child1</div>
</div>
<!-- 阻止冒泡事件的发生,即点击子元素child2,只会触发只元素相关的方法,不会触发父元素的方法-->
<div id="parent2" onclick="alert(this.id)" class="parent">parent2
<div id="child2" onclick="preventBubble(this,event);" class="child">child2</div>
</div>
</body>
</html>