事件流和阻止冒泡

最新推荐文章于 2024-07-25 20:08:25 发布

我爱大肘子

最新推荐文章于 2024-07-25 20:08:25 发布

阅读量108

点赞数

分类专栏：前端文章标签：事件流和阻止冒泡

本文链接：https://blog.csdn.net/weixin_44388086/article/details/89060395

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件流和阻止冒泡:event.stopPropagation()非ie下;event.cancelBubble=true;ie下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.fbox{width: 200px; height: 200px;border: 1px solid red; margin: 50px auto;}
			.sbox{width: 100px; height: 100px; border: 1px solid blue; margin: 50px auto;}
		</style>
	</head>
	<body id="body1">
		<div class="fbox" id="div1">
			<div id="div2" class="sbox">
				
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var fdiv=document.getElementById("div1");
	var sdiv=document.getElementById("div2");
	var fbody=document.getElementById("body1");
	fbody.function(e){
		var oo=e||event;
		//oo.stopPropagation();//非IE下阻止冒泡;
		oo.cancelBubble=true;//IE下阻止冒泡;
		alert("我是body");
	}
	fdiv.function(e){
		var oo=e||event;
		//oo.stopPropagation();//非IE下阻止冒泡;
		oo.cancelBubble=true;//IE下阻止冒泡;
		alert("我是父级盒子")
	}
	sdiv.function(e){
		var oo=e||event;
		//oo.stopPropagation();//非IE下阻止冒泡;
		oo.cancelBubble=true;//IE下阻止冒泡;
		alert("我是子级盒子");
	}
</script>