element.closest 实现点击穿透的核心是不阻止事件传播，而是向上查找符合选择器的最近祖先元素，跳过中间无需响应的容器，适用于弹窗遮罩、卡片嵌套等场景。

用 element.closest 实现点击穿透，核心是：**不阻止事件传播，而是让事件委托到目标祖先上，并跳过中间不需要响应的容器**。它比手动遍历父节点更简洁、语义清晰，且天然支持 CSS 选择器匹配。

理解点击穿透的本质需求

点击穿透不是“让点击穿过透明层”，而是忽略某些中间包裹元素的事件拦截，把点击行为交给更外层、符合业务逻辑的祖先节点处理。常见于弹窗遮罩、卡片嵌套、可拖拽区域内的按钮等场景。

例如：一个带关闭按钮的弹窗，弹窗内容区里有多个可点击卡片，但你希望点击卡片空白处关闭弹窗，而点击卡片内按钮时不关闭——这时不能靠 stopPropagation，而要靠向上查找“真正想响应点击的容器”。

用 closest 替代手写循环查找

传统做法常写 while 循环 + parentNode 判断 class 或 tagName，易出错、难维护。而 closest 一行就能完成：

• event.target.closest('.modal') —— 找最近的 modal 容器
• event.target.closest('[data-action="close"]') —— 匹配带特定属性的祖先
• event.target.closest('button, a, [role="button"]') —— 排除交互控件，只对“非控件区域”生效

注意：closest 会包含自身（即从 event.target 开始查），所以如果按钮本身有 .modal 类，也会被命中。必要时可用 event.target !== matched && matched?.closest(...) 过滤。

结合事件委托实现穿透式响应

在最外层容器（如 body 或 app 根节点）监听 click，用 closest 判断是否落在目标区域内，再执行对应逻辑：

document.body.addEventListener('click', (e) => {
  const modal = e.target.closest('.popup-modal');
  const card = e.target.closest('.card');
  
  // 点击在 modal 内，但不在 card 的任何子控件上 → 触发关闭
  if (modal && !card?.matches(':scope > *:is(button, a, [role="button"])')) {
    if (!e.target.closest('.popup-close-btn')) {
      modal.classList.remove('show');
    }
  }
});

关键点：

• 用 :scope > * 限定只检查 card 直接子元素是否为控件，避免误判内部按钮
• 显式排除关闭按钮本身（closest('.popup-close-btn')），防止重复关闭
• 所有判断基于 DOM 结构，不依赖事件冒泡路径中的中间 handler

兼容性与边界注意事项

closest 在现代浏览器中已全覆盖（Chrome 41+, Firefox 36+, Safari 9.1+, Edge 15+）。如需兼容 IE，可用 polyfill 或降级为 Element.prototype.matches + 循环。

容易忽略的细节：

• closest 不跨 shadow DOM 边界，若组件使用 Shadow DOM，需先调用 event.composedPath()[0] 获取实际点击元素
• display: none 或 visibility: hidden 的元素仍会被 closest 匹配到，如需视觉层面过滤，应额外判断 getComputedStyle(el).display !== 'none'
• 动态插入的节点无需重新绑定，因为事件委托在父层，closest 每次都实时查询当前 DOM 结构