stopPropagation与stopImmediatePropagation

2020/10/03 01:01 · javascript ·  · 0评论

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

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

jQuery文档中的快速示例

$("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>

请注意,事件绑定的顺序在这里很重要!

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

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

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

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

jQuery API中

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

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

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

event.stopPropagation将阻止父元素上的处理程序运行。

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

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

说,如果您有一个<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>对于其他元素,它将遵循相同的原理。

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

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

这是示例:Jsfiddle

谢谢,-Sahil

出乎意料的是,所有其他答案只能说出一半事实或实际上是错误的!

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

什么阶段?

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

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

  • quote:“ event.stopPropagation()允许对同一元素执行其他处理程序”

    • 纠正:如果在捕获阶段停止,则气泡阶段处理程序将永远无法到达,并且在同一元素上也将其跳过
  • quote:“ event.stopPropagation()[...]仅用于停止执行其相应的父处理程序”

    • 纠正:如果在捕获阶段停止传播则不会调用任何子级(包括目标)上的处理程序,不仅父级
    • ...并且:如果在冒泡阶段停止传播,则已经调用了所有捕获阶段处理程序,包括在父级上的处理程序

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

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,则将触发更改CSS的p元素上的下一个click事件,但是如果event.stopImmediatePropagation(),则不会触发下一个p click事件。

在这里,我为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>

这是一个演示差异的演示:

document.querySelectorAll("button")[0].addEventListener('click',e=>{e.stopPropagation(); alert(1);})
document.querySelectorAll("button")[1].addEventListener('click',e=>{e.stopImmediatePropagation(); alert(1);})
document.querySelectorAll("button")[0].addEventListener('click',e=>{alert(2);})
document.querySelectorAll("button")[1].addEventListener('click',e=>{alert(2);})
 
<div onclick="alert(3)">
   <button>1...2</button>
</div>
<div onclick="alert(3)">
   <button>1</button>
</div>

请注意,您可以将多个事件处理程序附加到元素上的事件。

本文地址:http://javascript.askforanswer.com/stoppropagationyustopimmediatepropagation.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!