事件冒泡场景下如何跳过指定祖先元素的事件监听？

要做到点击sub child时跳过child的事件、但保留parent的事件执行，有两种靠谱的实现方式：

方法一：在child的事件里判断来源，直接跳过 #

修改childClick函数，检查点击的目标是否来自sub child元素，如果是就不执行后续逻辑：

function parentClick() {
  alert('parent click');
}

function childClick(event) {
  // 判断点击目标是否是sub-child或者它的子元素
  if (event.target.closest('.sub-child')) {
    return; // 直接返回，跳过child的事件逻辑
  }
  alert('childClick');
}

function subChildClick() {
  alert('subChildClick');
}

HTML和CSS保持原代码不变即可，这种方式逻辑简单直观，不需要调整事件注册方式。

方法二：利用事件捕获+阻止冒泡拆分执行流程 #

DOM事件存在捕获和冒泡两个阶段，我们可以让parent的事件在捕获阶段提前触发，再在sub child的事件里阻止冒泡，这样child的冒泡事件就会被拦截：

首先修改HTML，移除parent的onClick属性，改用JS注册捕获阶段的事件（HTML属性绑定的事件只能在冒泡阶段触发）：

<div class="parent">
  parent
  <div class="child" onClick="childClick()">
     child
    <div class="sub-child" onClick="subChildClick()">sub child</div>
  </div>
</div>

然后修改JS代码：

// 页面加载完成后，给parent注册捕获阶段的点击事件
window.addEventListener('load', function() {
  document.querySelector('.parent').addEventListener('click', parentClick, true);
});

function parentClick() {
  alert('parent click');
}

function childClick() {
  alert('childClick');
}

function subChildClick(event) {
  alert('subChildClick');
  event.stopPropagation(); // 阻止事件继续冒泡到child
}

CSS保持原代码不变。点击sub child时，parent的捕获事件会先执行，之后subChildClick触发并阻止冒泡，child的事件就不会被触发，刚好符合需求。

内容的提问来源于stack exchange，提问作者Kesavan R