[英]Does stopPropagation() stops executing the event from capture phase?
This image is taken from DOM ENLIGHTENMENT book.此图像取自DOM ENLIGHTENMENT书籍。 It says stopPropagation() will stop the capture and bubble event flow phases.它说 stopPropagation() 将停止捕获和冒泡事件流阶段。
I know stopPropagation() will stop propagation and won't execute the callback function in the bubbling phase.我知道stopPropagation()将停止传播并且不会在冒泡阶段执行回调 function 。
But in the following code snippet after using the stopPropagation() on the button, the body event callback method is still executed.但是在下面的代码片段中,在按钮上使用了stopPropagation()之后,仍然执行了 body 事件回调方法。
Does stopPropagation() also stop the event flow phase in the capture phase also? stopPropagation()是否也会在捕获阶段停止事件流阶段?
const button = document.querySelector('button'); document.body.addEventListener('click', e => { console.log('Body event triggered'); }, true); button.addEventListener('click', e => { console.log('button is clicked 1'); }); button.addEventListener('click', e => { e.stopPropagation(); console.log('button is clicked 2'); }); button.addEventListener('click', e => { console.log('button is clicked 3'); });
<button> click me </button>
But in the following code snippet after using the stopPropagation() on the button, the body event callback method is still executed.但是在下面的代码片段中,在按钮上使用了 stopPropagation() 之后,仍然执行了 body 事件回调方法。
All your button
click
handlers are target/bubbling handlers, not capture handlers.您所有的button
click
处理程序都是目标/冒泡处理程序,而不是捕获处理程序。 At the point you're calling stopPropagation
, the capture phase is already done.在您调用stopPropagation
时,捕获阶段已经完成。 If you had a target/bubbling handler on document.body
, you'd see that it wasn't called.如果您在document.body
上有一个目标/冒泡处理程序,您会看到它没有被调用。
Note that propagation relates to moving from one element to its parent (bubbling) or descendant (capture) but doesn't affect processing other handlers on the same element, which is why your handler calling stopPropgation
didn't stop the other handlers on button
both firing.请注意,传播与从一个元素移动到其父元素(冒泡)或后代(捕获)有关,但不会影响处理同一元素上的其他处理程序,这就是为什么您的处理程序调用stopPropgation
并没有停止button
上的其他处理程序射击。 (If you'd used stopImmediatePropagation
, you would have stopped the third handler because it stops things right away, even in the middle of the current element's handlers.) (如果你使用stopImmediatePropagation
,你会停止第三个处理程序,因为它会立即停止事情,即使在当前元素的处理程序中间也是如此。)
Here's an example cancelling propagation during the capture phase:这是在捕获阶段取消传播的示例:
const div = document.getElementById("middle"); const button = document.getElementById("button"); // Capture phase on body document.body.addEventListener("click", e => { console.log("body capture handler"); }, true); // Target/bubbling phase on body document.body.addEventListener("click", e => { console.log("body target/bubbling handler"); }); // Capture phase on middle middle.addEventListener("click", e => { console.log("middle capture handler - stopping propagation"); e.stopPropagation(); }, true); // Target/bubbling phase on middle middle.addEventListener("click", e => { console.log("middle target/bubbling handler"); }); // Capture phase on button button.addEventListener("click", e => { console.log("button capture handler"); }, true); // Target/bubbling phase on button button.addEventListener("click", e => { console.log("button target/bubbling handler"); });
<div id="middle"> <input type="button" id="button" value="Click me"> </div>
Notice that:请注意:
The capture phase handler on button
didn't fire, because propagation was stopped before it got there; button
上的捕获阶段处理程序没有触发,因为传播在到达那里之前就停止了; and和
None of the target/bubbling phase handlers fired, since propagation was stopped before the target phase (and thus before the bubbling phase).没有任何目标/冒泡阶段处理程序被触发,因为传播在目标阶段之前停止(因此在冒泡阶段之前)。
I find this diagram from the DOM3 Events spec really useful for picturing this stuff:我发现DOM3 Events 规范中的这张图对于描绘这些东西非常有用:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.