stopPropagation将阻止任何父处理程序被执行。stopImmediatePropagation将阻止任何父处理程序和任何其他处理程序被执行

jquery文档中的快速示例:

美元(p) .click(函数(事件){ event.stopImmediatePropagation (); })； 美元(p) .click(函数(事件){ //该函数不会被执行 (美元). css(“背景颜色”,“# f00”); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < p > < / p >例子

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

美元(p) .click(函数(事件){ //该函数将被触发 (美元). css(“背景颜色”,“# f00”); })； 美元(p) .click(函数(事件){ event.stopImmediatePropagation (); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < p > < / p >例子

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

下面是一个演示来说明两者的区别:

document.querySelectorAll(“按钮”)[0]。addEventListener(“点击”,e = > { e.stopPropagation (); 提醒(1); })； document.querySelectorAll(“按钮”)[1]。addEventListener(“点击”,e = > { e.stopImmediatePropagation (); 提醒(1); })； document.querySelectorAll(“按钮”)[0]。addEventListener(“点击”,e = > { 提醒(2); })； document.querySelectorAll(“按钮”)[1]。addEventListener(“点击”,e = > { 提醒(2); })； < div onclick = "警报(3)" > < >按钮1……2 > < /按钮 <按钮> 1 > < /按钮 < / div >

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

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");
});

如果事件。stopPropagation在前面的例子中使用，然后在p元素上的下一个点击事件改变css将触发，但在case event. stopimmediatepropagation()中，下一个p点击事件将不会触发。

在这里，我添加了stopPropagation vs stopImmediatePropagation的jsf示例。 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>

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

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

下面是示例:Jsfiddle!

谢谢, sahil聊