closest 是 dom 元素方法，需在 javascript 中调用，从自身向上匹配 css 选择器，返回首个匹配祖先（含自身），不支持伪类，ie11-需 polyfill，事件委托应直接对 event.target 调用。
closest 方法在 HTML 中的使用前提
closest 是 DOM 元素上的原生方法，不是 HTML 属性或标签功能，必须在 JavaScript 环境中调用。它只作用于已存在的元素节点（Element），不能直接写在 HTML 标签里。常见误操作是试图在 onclick 内联事件中直接写 closest('div')，这会报 undefined is not a function 错误，因为内联 handler 里的 this 指向的是全局对象（非当前元素）。
- 内联事件中必须显式传入
this，比如：onclick="handleClick(this)"，再在函数里调用el.closest('.container') - 更推荐用
addEventListener绑定，此时回调中的this或event.target可直接调用closest - 不支持 IE，IE11 及以下需 polyfill 或改用
matches+ 循环父节点模拟
closest 的选择器语法和匹配规则
closest 接收一个 CSS 选择器字符串，从当前元素自身开始向上查找（含自己），返回第一个匹配的祖先（包括自己）。它不跳过文本节点或注释节点，但只检查元素节点。
- 支持绝大多数标准选择器：
closest('.card')、closest('article > .content')、closest('[data-id]') - 不支持伪类如
:hover、:nth-child()（运行时报SyntaxError） -
closest('div')会匹配自己（如果它就是div），而closest('div:not(.self)')则跳过自身 - 若无匹配，返回
null，务必做空值判断，否则链式调用会崩：el.closest('.x')?.classList.add('active')
常见错误：事件委托中 event.target.closest 的坑
在事件委托场景下，很多人直接对 event.target 调用 closest，却忽略了目标可能是文本节点或子元素内部节点，导致匹配失败。
- 正确做法是始终用
event.target.closest(selector)，而不是先取父节点再查 - 错误示例：
event.target.parentNode.closest('.btn')—— 如果点击的是按钮内的span，父节点可能是span，它没有.btn类 - 正确示例：
if (event.target.closest('.btn')) { ... }，哪怕点的是按钮里的图标或文字，也能命中 - 注意：若绑定在
document上，event.target可能是body或html，closest仍有效，但性能略低，建议绑定到更近的容器
兼容性处理与轻量 polyfill
如果项目需支持 IE11，可加一段 10 行内的 polyfill：
if (!Element.prototype.closest) {
Element.prototype.closest = function(selector) {
let el = this;
while (el && !el.matches(selector)) el = el.parentElement;
return el;
};
}
- 这段代码不依赖外部库，覆盖了 99% 的使用场景
- 注意：IE 中
matches叫msMatchesSelector，上面代码在 IE11 中实际可用，因现代 IE11 已支持标准matches - 如果用到 Web Components 或 Shadow DOM，
closest默认不跨 shadow boundary；需手动遍历getRootNode()并调用其host，这点容易被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
