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