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元素后，背景颜色不发生改变。
网友评论文明上网理性发言 已有0人参与
发表评论: