阻止事件传播：stopPropagation()方法和cancelBubble

最新推荐文章于 2024-08-15 19:36:37 发布

丨Q ，Q丨

最新推荐文章于 2024-08-15 19:36:37 发布

阅读量1.2k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq2071114140/article/details/108289750

版权

JS 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

本文介绍了阻止事件传播的两种方法：stopPropagation()和cancelBubble属性。通过设置event.cancelBubble为true或调用event.stopPropagation()，可以阻止事件继续向上冒泡。这些方法在捕获阶段也能起作用，一旦设置，事件将停止捕获并防止冒泡，有效阻止事件的传播。

摘要由CSDN通过智能技术生成

文章目录

阻止事件传播：stopPropagation()方法和cancelBubble

阻止事件传播：stopPropagation()方法和cancelBubble

1. cancelBubble属性

如果事件对象的cancelBubble属性被设置为true, 则会阻止事件继续向上冒泡（也可以阻止事件的捕获）。

举例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload = function(){
				let div1 = document.getElementById("div1");
				let div2 = document.getElementById("div2");
				
				div1.addEventListener(
					"click",
					()=>{
						console.log("this is div1");
					},
					false
				);
				
				div2.addEventListener(
					"click",
					function(){
						console.log("this is div2");
					},
					false
				);
				
				document.onclick = ()=>{
					console.log("this is html");
				};
			};
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2" style="height:30px; background-color: #ff7f27;">
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

现在，如果想要在冒泡到div1之后，停止冒泡，则可以在div1绑定的回调函数中，将事件对象的cancelBubble属性置为true来阻止事件向上冒泡。

				div1.addEventListener(
					"click",
					event=>{
						console.log("this is div1");
						event.cancelBubble = true;
					},
					false
				);

在这里插入图片描述

div2的事件触发时，执行div2的回调函数之后，由于事件对象的cancelBubble属性为false（默认值），事件向上冒泡，触发div1的事件；div1的回调函数将事件对象的cancelBubble属性置为true，回调函数执行完成后，由于cancelBubble为true，阻止事件冒泡。

2. stopPropagation()

Event.stopPropagation()也可以用来取消事件冒泡，使用也很简单，在设置cancelBubble为true的位置，调用该方法可以起到相同作用。

				div1.addEventListener(
					"click",
					event=>{
						console.log("this is div1");
						event.stopPropagation();
					},
					false
				);

3. 最早的作用阶段：捕获阶段

上面两个方法，最早可以作用于捕获阶段。

也就是说，捕获过程中，cancelBubble属性为true，就会停止捕获；同样，如果在捕获过程中，调用了stopPropagation()也会停止捕获。

停止捕获后，也不会继续冒泡。

				div1.addEventListener(
					"click",
					event=>{
						console.log("this is div1");
					},
					false
				);
				
				div1.addEventListener(
					"click",
					event=>{
						console.log("capture : this is div1");
						event.cancelBubble = true;
					},
					true
				);
				
				div2.addEventListener(
					"click",
					function(){
						console.log("this is div2");
					},
					false
				);
				
				div2.addEventListener(
					"click",
					function(){
						console.log("capture : this is div2");
					},
					true
				);
				
				document.onclick = ()=>{
					console.log("this is html");
				};
				
				
				document.addEventListener(
					"click",
					function(){
						console.log("capture : this is document");
					},
					true
				);