如何让父元素忽略子元素触发的事件（禁用event.stopPropagation()）

不能用event.stopPropagation()的情况下，可通过在父组件的事件处理函数中判断点击目标是否属于子组件DOM范围，来跳过父组件自身的事件逻辑，同时不影响事件继续冒泡供其他监听器使用。

实现步骤： #

1. 给所有需要被父组件忽略点击的子组件添加统一类名，比如dropdown-ignore-click
2. 在父组件的点击事件处理函数中，检查事件目标是否处于该类名对应的DOM范围内，若是则直接返回，不执行父组件逻辑

代码示例： #

父组件模板

<div class="parent-container" @click="handleParentClick">
  <!-- 子组件添加统一类名 -->
  <Dropdown class="dropdown-ignore-click" />
  <!-- 其他父组件内容 -->
</div>

父组件事件处理方法

handleParentClick(event) {
  // 用closest判断点击目标是否在子组件范围内
  if (event.target.closest('.dropdown-ignore-click')) {
    return; // 跳过父组件的事件逻辑
  }
  // 这里写父组件原本需要执行的点击逻辑
}

原理说明： #

• Element.closest()会从当前元素向上查找，直到找到匹配选择器的元素，能准确判断点击是否发生在子组件内部
• 这种方式没有阻止事件冒泡，事件依然会向上传递，不影响其他监听该事件的逻辑（比如关闭其他下拉菜单的全局监听）
• 切换下拉菜单的预期行为不受影响，同时父组件只会响应非子组件区域的点击

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