js阻止事件冒泡

最新推荐文章于 2022-12-07 20:32:59 发布

springmoontree

最新推荐文章于 2022-12-07 20:32:59 发布

阅读量216

点赞数

分类专栏： JavaScript的探索之路

本文链接：https://blog.csdn.net/qq_29999249/article/details/61615470

版权

JavaScript的探索之路专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阻止事件冒泡</title>
	<style>
		#outer{
			width:500px;
			height:300px;
			background-color: green;
			color:#fff;
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);/*利用了不定宽高水平垂直居中法*/
		}
		#inner{
			width:200px;
			height:100px;
			position: absolute;
			left:250px;
			top:150px;
			margin: -50px 0 0 -100px;
			background-color: blue;/*利用了已知宽高水平垂直居中法*/
		}
	</style>
</head>
<body>
	<div id="outer">我是外层div
		<div id="inner">我是内层div</div>
	</div>
	<script>
		var out_div = document.getElementById('outer');
		var in_div = document.getElementById('inner');
		document.onclick = function(){
			alert("document被点击");
		}
		out_div.onclick = function(){
			alert("外部div被点击");
		}
		in_div.onclick = function(ev){
			var oEvent = ev || event;

			/*这一句这么写是要兼容各个浏览器，在FireFox浏览器中，事件绑定的函数要获取到事件本身，需要从函数中传入，而IE等浏览器则可以直接使用event或者window.event得到事件本身。*/

			oEvent.stopPropagation();
			alert("内部div被点击");
		}
		// stopPropagation()除IE8及其以下浏览器都兼容
	</script>
</body>
</html>

chrome浏览器下

FireFox浏览器下

opera浏览器下

IE11浏览器下

springmoontree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js阻止事件冒泡

阻止事件冒泡 #outer{ width:500px; height:300px; background-color: green; color:#fff; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);/*利用了不定宽高水平垂直居中法*/
复制链接

扫一扫

专栏目录