stopImmediatePropagation()方法：防止当前事件在DOM树上冒泡

作者：andy0012019.12.16来源：Web前端之家浏览：10663评论:0

关键词：js stopImmediatePropagation

stopImmediatePropagation()方法是JQuery中一个内置方法，属于event对象；用于阻止为所选元素执行其他事件处理程序，并防止当前事件在DOM树上冒泡。

语法：

event.stopImmediatepropagation()

参数：该event参数来自事件绑定函数，不可省略。

返回值：此方法返回所选元素和应用的更改。

示例：

<!DOCtype html>
<HTML>

	<head>
		<meta charset="UTF-8">
		<style>
			div {
				height: 100px;
				width: 300px;
				padding: 10px;
				border: 1px solid blue;
				background-color: lightblue;
			}
		</style>
	</head>

	<body>
		<div>点击这个 div 元素。</div>
		<script src="https://CDNJS.cloudflare.com/Ajax/libs/jQuery/2.1.3/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("div").click(function(event) {
					alert("执行的第1个事件");
					event.stopImmediatePRopagation();
				});
				$("div").click(function(event) {
					alert("执行的第2个事件");
				});
				$("div").click(function(event) {
					alert("执行的第3个事件");
				});
			});
		</script>
	</body>

</html>

在上面的示例中，有三个弹出。但只弹出第一个窗口，其他两个弹出被stopImmediatePropagation()方法阻止执行了。

示例2：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			body { 
            width: 70%; 
            height: 40%; 
            font-size: 30px; 
            padding: 20px; 
            border: 2px solid green; 
        } 
          
        p { 
            background-color: lightgrey; 
        } 
          
        div { 
            padding: 4px; 
            background-color: lightgrey; 
        } 
		</style>
	</head>

	<body>
		<p>测试文本！点击p元素</p>
		<div >测试文本！点击div元素</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/JQuery.min.js"></script>
		<script>
		$("p").click(function(event) { 
	            event.stopImmediatePropagation(); 
	        }); 
	        $("p").click(function(event) { 
	            // this function will not executed 
	            $(this).CSS("background-color", "yellow"); 
	        }); 
	        $("div").click(function(event) { 
	            // This function will executed 
	            $(this).css("background-color", "red"); 
	        }); 
		</script>
	</body>

</html>

上例中，点击p元素后发生两个事件，第一个事件为调用stopImmediatePropagation()方法，第二个事件是改变p元素的背景颜色；但当stopImmediatePropagation()方法被调用后，会阻止第二个事件发生，所以点击p元素后，背景颜色不发生改变。

赏您的支持是我们创作的动力！