js中的冒泡事件以及如何阻止冒泡

最新推荐文章于 2024-07-08 08:31:14 发布

星繁~

最新推荐文章于 2024-07-08 08:31:14 发布

阅读量1k

点赞数 1

分类专栏： # js

本文链接：https://blog.csdn.net/m0_38010595/article/details/113564838

版权

js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

事件冒泡：
当一个元素上的事件被触发的时候，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到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>

星繁~

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
3
评论
js中的冒泡事件以及如何阻止冒泡

事件冒泡：当一个元素上的事件被触发的时候，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)例如：比如说鼠标点击了一个按钮，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作；但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。取消冒泡就是取消这种机制。阻止JavaScript事件冒泡传递（canc
复制链接

扫一扫