stopPropagation与stopImmediatePropagation

313

event.stopPropagation()和之间有什么区别event.stopImmediatePropagation()？

javascript jquery

— Arjun
source

320

stopPropagation将防止任何父被执行的处理程序stopImmediatePropagation将防止任何父处理程序，并且还任何其他处理程序从执行

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

$("p").click(function(event) {
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

展开摘要

注意，事件绑定的顺序在这里很重要！

显示代码段

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

展开摘要

— 戴夫
source

1

您强调“父母”，但实际上，如果在捕获阶段被调用，它们也都会停止输入孩子！有关详细信息，请参见我的答案。

— 罗伯·

57

一个小例子来说明这两种传播停止是如何工作的。

显示代码段

var state = {
  stopPropagation: false,
  stopImmediatePropagation: false
};

function handlePropagation(event) {
  if (state.stopPropagation) {
    event.stopPropagation();
  }

  if (state.stopImmediatePropagation) {
    event.stopImmediatePropagation();
  }
}

$("#child").click(function(e) {
  handlePropagation(e);
  console.log("First event handler on #child");
});


$("#child").click(function(e) {
  handlePropagation(e);
  console.log("Second event handler on #child");
});

// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
  handlePropagation(e);
  console.log("Event handler on div: #" + this.id);
});


// Enable/disable propogation
$("button").click(function() {
  var objectId = this.id;
  $(this).toggleClass('active');
  state[objectId] = $(this).hasClass('active');
  console.log('---------------------');
});

div {
  padding: 1em;
}

#parent {
  background-color: #CCC;
}

#child {
  background-color: #000;
  padding: 5em;
}

button {
  padding: 1em;
  font-size: 1em;
}

.active {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">&nbsp;</div>
</div>

<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

展开摘要

绑定了三个事件处理程序。如果我们不停止任何传播，则应该有四个警报-子div上三个，父div上一个。

如果我们停止该事件的传播，那么将有3条警报（全部在内部子div上）。由于该事件不会在DOM层次结构中传播，因此父div不会看到它，并且其处理程序也不会触发。

如果我们立即停止传播，那么将只有1个警报。即使将三个事件处理程序附加到内部子div上，也只执行1个，并且即使在同一元素内，任何进一步的传播也会被立即终止。

— 阿努拉格
source

两种stopPropagation()变体也将停止在DOM层次结构中传播。不只是上升。请检查我的答案以获取有关捕获阶段的详细信息。

— 罗伯·西默

26

从jQuery API中：

除了不执行元素上的任何其他处理程序之外，此方法还通过隐式调用event.stopPropagation（）来阻止冒泡。为了简单地防止事件冒泡到祖先元素，但允许其他事件处理程序在同一元素上执行，我们可以改用event.stopPropagation（）。

使用event.isImmediatePropagationStopped（）知道是否曾经（在该事件对象上）调用过此方法。

简而言之：event.stopPropagation()允许在同一元素上执行其他处理程序，而event.stopImmediatePropagation()防止每个事件运行。

— 阿伦·罗特维（Aron Rotteveel）
source

可以肯定的是，原生javascript版本event.stopImmediatePropagation不会停止冒泡吧？

— 亚历山大·德克

确实，冒泡是指事件传播到父元素时，stopImmediatePropagation阻止了事件在传播期间的传播，这两者都应防止冒泡，这毫无用处，您还可以更改捕获模式，这将首先触发最外面的元素，并且然后才会下来给孩子（冒泡是默认的，而在相反的方向工作）

— JonnySerra

1

至少可以说是不准确的。停止在捕获阶段将不允许在我的答案中说明

— 罗伯·西默

23

event.stopPropagation将阻止父元素上的处理程序运行。
调用event.stopImmediatePropagation还将阻止同一元素上的其他处理程序运行。

— ak
source

21

值得一提的是，事件处理程序是按照将它们附加到元素的顺序执行的。

— Felix Kling

18

我来晚了，但也许可以举一个具体的例子：

说，如果您有一个<table>，则带有<tr>，然后<td>。现在，假设您为<td>元素设置了3个事件处理程序，然后event.stopPropagation()在设置为的第一个事件处理程序中进行操作<td>，则的所有事件处理程序<td>仍将运行，但事件不会传播到<tr>或<table>（并且不会上去达<body>，<html>，document，和window）。

但是现在，如果你使用event.stopImmediatePropagation()你的第一个事件处理程序，那么，对于其他两个事件处理程序<td>将不会运行，并且不会传播到<tr>，<table>（并不会上去达<body>，<html>，document，和window）。

请注意，它不只是用于<td>。对于其他元素，它将遵循相同的原理。

— 非极性
source

10

1）event.stopPropagation(): =>仅用于停止执行其相应的父处理程序。

2）event.stopImmediatePropagation(): =>用于停止执行其相应的父处理程序以及除当前处理程序之外附加到其自身的处理程序或函数。=>它还会停止所有附加到整个DOM当前元素的处理程序。

这是示例：Jsfiddle！

谢谢，-Sahil

— 萨希尔·卡什特瓦尔
source

3

event.stopPropagation（）允许在同一元素上执行其他处理程序，而event.stopImmediatePropagation（）阻止每个事件运行。例如，请参见下面的jQuery代码块。

$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed 
$(this).css("color", "#fff7e3");
});

如果在上一个示例中使用event.stopPropagation，则将触发p元素上的更改CSS的下一个click事件，但是如果event.stopImmediatePropagation（），则不会触发下一个p单击事件。

— 拉胡尔·库马尔（Rahul Kumar）
source

2

令人惊讶的是，所有其他答案只说了一半真话或实际上是错的！

e.stopImmediatePropagation() 停止为此事件调用任何其他处理程序，没有异常
e.stopPropagation()是相似的，但确实还呼吁所有的处理程序这一阶段对这个元素如果不是已经叫

什么阶段？

例如，单击事件将始终首先一直沿DOM一直下去（称为“捕获阶段”），最后到达事件的起点（“目标阶段”），然后再次冒泡（“泡沫阶段”）。并且，addEventListener()您可以为注册和气泡阶段分别注册多个处理程序。（目标阶段不区分地调用目标上这两种类型的处理程序。）

这是其他答案不正确的原因：

quote：“ event.stopPropagation（）允许执行同一元素上的其他处理程序”
更正：如果在捕获阶段停止，则气泡阶段处理程序将永远无法到达，并且在同一元素上也将其跳过
quote：“ event.stopPropagation（）[...]仅用于停止执行其相应的父处理程序”
纠正：如果在捕获阶段停止，则不调用任何孩子（包括目标）的处理程序，不仅父项

_{一个小提琴和mozilla.org 事件阶段与演示说明。}

— 罗伯特·西默
source

1

在这里，我为stopPropagation和stopImmediatePropagation添加了JSfiddle示例。 JSFIDDLE

let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");


stopProp.addEventListener("click", function(event){
	event.stopPropagation();
  console.log('stopPropagation..')
  
})
stopProp.addEventListener("click", function(event){
  console.log('AnotherClick')
  
})
stopImmediate.addEventListener("click", function(event){
		event.stopImmediatePropagation();
    console.log('stopimmediate')
})

stopImmediate.addEventListener("click", function(event){
    console.log('ImmediateStop Another event wont work')
})

defaultbtn.addEventListener("click", function(event){
    alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
    console.log("Second event defined will also work same time...")
})

div{
  margin: 10px;
}

<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div  id="grand-div">
  <div class="new" id="parent-div">
    <button id="stopImmediatebtn">
    StopImmediate
    </button>
  </div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>

展开摘要

— 阿比拉什
source