What's the difference between event.stopPropagation and event.preventDefault?

  • 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 实现点击穿透

 <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() ,那么剩下的事件监听器都不会被调用,还会阻止冒泡。