What's the difference between event.stopPropagation and event.preventDefault?
Published by powerfulyang on Dec 22, 2020
-
stopPropagation
prevents further propagation of the current event in the capturing and bubbling phases. -
preventDefault
prevents the default action the browser makes on that event. -
使用 css
pointer-events: none
实现点击穿透
1 2 3 4 5 6 7 8 9
<div class='parent' onclick='alert(`parent`)'> <div class='child' onclick='clickChild(event)'>child</div> </div> <script> function clickChild(e) { alert('child'); e.stopPropagation(); } </script>
stopImmediatePropagation
如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。 如果在其中一个事件监听器中执行stopImmediatePropagation()
,那么剩下的事件监听器都不会被调用,还会阻止冒泡。