阻止冒泡

最新推荐文章于 2020-06-29 19:11:06 发布

昵称2-20个字符

最新推荐文章于 2020-06-29 19:11:06 发布

阅读量249

点赞数

分类专栏： javascript 文章标签：事件冒泡 js

本文链接：https://blog.csdn.net/weixin_39517183/article/details/106503100

版权

javascript 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

阻止冒泡的两种方式

事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点。

e.stopPropagation(); && e.cancelBubble=true; 阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		*{margin:0;padding:0;}
		.father{width:400px;height:400px;background:pink;margin:50px auto 0;}
		.son{width:200px;height:200px;background:#454554;}
		</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
	<script>
		var son=document.querySelector(".son");
		var father=document.querySelector(".father");
		//addEventListener()  第三个参数为true 是捕获 为false 是冒泡
		son.addEventListener("click",function(e){
			alert("son");
			// e.stopPropagation();//阻止冒泡	
			// e.cancelBubble=true;//阻止冒泡 非标准
			//阻止事件冒泡的兼容性解决方案
			if(e && e.stopPropagation){
				e.stopPropation();
			}else{
				window.event.cancelBubble=true;
			}

		},false);
		father.addEventListener('click',function(e){
			alert("father")
		},false);
		
	</script>
</body>
</html>

昵称2-20个字符

关注

0
点赞
踩
0

收藏

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

阻止冒泡的两种方式事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点。e.stopPropagation(); && e.cancelBubble=true; 阻止冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
复制链接

扫一扫