浏览器的事件流一共分两大阶段:

  1. 捕获阶段(往下)

    事件从最外层(window)一路往目标元素「往下走」,依次经过祖先节点──这就是“往下”的意思。

  2. 目标阶段

    事件到达目标元素本身。

  3. 冒泡阶段(往上)

    事件再从目标往外冒泡回去,依次经过父节点──这就是“往上”的意思。


e.stopPropagation()


如果你想阻断下行(捕获)阶段

  1. 注册一个捕获阶段的监听器

    parent.addEventListener('click', handler, { capture: true });
    
  2. 在 handler 里调用 stopPropagation()

    function handler(e) {
      // 这里在捕获阶段就把事件流给拦截住,
      // 下面的子节点就收不到这个事件了
      e.stopPropagation();
    }
    

这样就能在事件“往下”到子元素之前拦截它,子元素上的任何 click listener(不论是捕获还是冒泡阶段)都不会被触发。


其他相关 API


总结