取消事件进一步捕获或者冒泡

最新推荐文章于 2022-09-29 15:03:40 发布

音色丽敏

最新推荐文章于 2022-09-29 15:03:40 发布

阅读量416

点赞数

分类专栏：原生javascript 文章标签：取消事件冒泡

本文链接：https://blog.csdn.net/qq_40756247/article/details/85322207

版权

原生javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

取消事件的捕获与冒泡

在浏览器发展到第四代时开发团队遇到一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？怎么理解这个问题，举个形象的例子，先在纸上画多个同心圆，然后把手指向圆心，那么问题来了，当前指的是哪个圆的圆心？
具体到我们在写JS事件的时候，先在body里面写一个有范围的div，然后在JS里面写div的onclick事件，同时也写上document的onclick事件，那么当我们点击div时，会发生什么，下面来看看：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>event</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="div">
			
		</div>
		<script type="text/javascript">
			var oDiv=document.getElementById("div");
			oDiv.onmousedown = function(ev) {
				var oevent = ev || event;
				console.log(1);
			}
			document.onmousedown = function(ev) {
				var oevent = ev || event;
				console.log(2);
			}
		</script>
	</body>
</html>

那么我们点击看看打印了什么：
在这里插入图片描述
可以发现两个事件都触发了，因为现代的浏览器都支持事件冒泡，那么什么是事件冒泡，先看下面的图：

从这不难看出，打印1和2其实是有先后的，在这无论JS事件里面把两个点击事件怎么放顺序，都是先打印1后打印2，所以如果两个功能是冲突的（比如我们的div点击显示一个图，document点击事件是把这个图隐藏）就会达不到我们想要的效果（点击div显示，点击div以为的部分隐藏图），所以我们需要进行取消事件的捕获与冒泡（捕获事件与这类似，也有需要取消的时候），具体只需要在div事件里面加上：
event.stopPropagation()；
也就是：

<script type="text/javascript">
			var oDiv=document.getElementById("div");
			oDiv.onmousedown = function(ev) {
				var oevent = ev || event;
				console.log(1);
				event.stopPropagation();
			}
			document.onmousedown = function(ev) {
				var oevent = ev || event;
				console.log(2);
			}
		</script>

得到结果：
在这里插入图片描述
这样就只执行了div的点击而不会向上冒泡执行document的点击，也就达到莱坞我们想要的效果。（注：event.stopPropagation()类型为只读的function,只有bubbles(表示事件是否冒泡）为true的时候才可以使用这个方法，单独取消冒泡为event.cancelBubble）

音色丽敏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
取消事件进一步捕获或者冒泡

取消事件的捕获与冒泡在浏览器发展到第四代时开发团队遇到一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？怎么理解这个问题，举个形象的例子，先在纸上画多个同心圆，然后把手指向圆心，那么问题来了，当前指的是哪个圆的圆心？具体到我们在写JS事件的时候，先在body里面写一个有范围的div，然后在JS里面写div的onclick事件，同时也写上document的onclick事件，那么当我们点击...
复制链接

扫一扫