event.stopPropagation()和event.stopImmediatePropagation()之间有什么区别?
当前回答
我是一个后来者，但也许我可以用一个具体的例子来说明:
比如说，如果你有一个<表>，有<tr>和<td>。现在，假设你为<td>元素设置了3个事件处理程序，那么如果你在为<td>设置的第一个事件处理程序中执行event. stoppropagation()，那么<td>的所有事件处理程序仍将运行，但事件不会传播到<tr>或<表>(并且不会向上传播到<body>， <html>，文档和窗口)。
然而，现在，如果你在你的第一个事件处理程序中使用event. stopimmediatepropagation()，那么，<td>的其他两个事件处理程序将不会运行，并且不会传播到<tr>， <表>(并且不会向上和向上到<body>， <html>，文档和窗口)。
注意，它不仅仅适用于<td>。对于其他元素，它将遵循相同的原则。
其他回答
我是一个后来者，但也许我可以用一个具体的例子来说明:
比如说，如果你有一个<表>，有<tr>和<td>。现在，假设你为<td>元素设置了3个事件处理程序，那么如果你在为<td>设置的第一个事件处理程序中执行event. stoppropagation()，那么<td>的所有事件处理程序仍将运行，但事件不会传播到<tr>或<表>(并且不会向上传播到<body>， <html>，文档和窗口)。
然而，现在，如果你在你的第一个事件处理程序中使用event. stopimmediatepropagation()，那么，<td>的其他两个事件处理程序将不会运行，并且不会传播到<tr>， <表>(并且不会向上和向上到<body>， <html>，文档和窗口)。
注意，它不仅仅适用于<td>。对于其他元素，它将遵循相同的原则。
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点击事件将不会触发。
下面是一个演示来说明两者的区别:
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 >
请注意，可以将多个事件处理程序附加到元素上的事件。
在这里，我添加了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>
一个演示这两种传播停止如何工作的小示例。
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"> </div> </div> <button id="stopPropagation">Stop Propogation</button> <button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>
绑定了三个事件处理程序。如果我们不停止任何传播，那么应该有四个警报——三个在子div上，一个在父div上。
如果我们停止事件传播，那么将会有3个警报(都在内部子div上)。由于事件不会沿着DOM层次结构向上传播，所以父div不会看到它，它的处理程序也不会触发。
如果我们立即停止传播，那么只有1个警报。尽管有三个事件处理程序附加到内部的子div，但只执行了一个，并且立即终止任何进一步的传播，即使是在同一元素中。
