IT技术 - stopPropagation 与 stopImmediatePropagation - 吾爱随笔录

stopPropagation 与 stopImmediatePropagation

IT技术 javascript jquery

2021-02-01 18:37:50

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

6个回答

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>

是否可以阻止其他处理程序而不是父处理程序？

2021-03-18 18:37:50

您强调“父母”，但实际上，如果在捕获阶段调用，两者也会停止进入孩子！详情请看我的回答。

2021-03-19 18:37:50

@AndrewFount 是的，如果您可以完全控制代码：将相关处理程序移动到捕获阶段，该阶段在冒泡阶段之前，并允许您在下降过程中（而不是上升过程中）中断调用链。

2021-03-31 18:37:50

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

显示代码片段

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 个警报。即使有 3 个事件处理程序附加到内部子 div，也只执行 1 个事件处理程序并且任何进一步的传播都会立即终止，即使在同一个元素中也是如此。

这两种stopPropagation()变体也将停止向下传播 DOM 层次结构。不只是起来。有关捕获阶段的详细信息，请检查我的答案。

2021-03-26 18:37:50

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

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

什么阶段？

例如，一个点击事件总是首先沿着 DOM 向下（称为“捕获阶段”），最后到达事件的起点（“目标阶段”），然后再次冒泡（“冒泡阶段”）。并且addEventListener()您可以独立地为捕获和冒泡阶段注册多个处理程序。（目标阶段在不区分的情况下调用目标上的两种类型的处理程序。）

这就是其他答案不正确的地方：

引用：“event.stopPropagation() 允许执行同一元素上的其他处理程序”
- 更正：如果在捕获阶段停止，将永远不会到达气泡阶段处理程序，也会在同一元素上跳过它们
引用：“event.stopPropagation() [...] 仅用于停止其相应父处理程序的执行”
- 更正：如果在捕获阶段停止传播，则不会调用任何孩子的处理程序，包括目标，不仅是父母
- ...并且：如果在冒泡阶段停止传播，则所有捕获阶段处理程序都已被调用，包括父级的处理程序

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

从jQuery API：

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

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

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

不准确，至少可以这么说。如我的回答中所述，在捕获阶段停止将不允许在同一元素上执行气泡处理程序。

2021-03-26 18:37:50

确实如此，冒泡是当事件传播到父元素时，stopImmediatePropagation阻止事件传播期间，它们都应该防止冒泡，您还可以更改捕获模式，这将首先触发最外层元素，这是毫无value的然后才会下来给孩子（冒泡是默认的，而在相反的方向工作）

2021-03-28 18:37:50

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

2021-04-11 18:37:50

我是后来者，但也许我可以用一个具体的例子来说明这一点：

假设您有<table>, 和<tr>, 然后<td>。现在，让我们说你设置3个的事件处理程序<td>元素，那么如果你event.stopPropagation()在你设定的第一个事件处理程序<td>，则所有事件处理程序<td>仍在运行，但该事件是不会传播到<tr>或<table>（并不会上升到<body>, <html>, document, 和window)。

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

请注意，它不仅适用于<td>. 对于其他元素，将遵循相同的原则。

其它你可能感兴趣的问题

上一篇检查字符串是否只包含数字下一篇ReactJS：超出最大更新深度错误