closest方法仅Element可用，调用非元素节点会直接报TypeError；应确保target为Element实例，推荐直接用event.target.closest(selector)并配合可选链。
不需要额外守卫——closest 方法本身只在元素节点上可用，且自动跳过文本、注释等非元素节点。它根本不会对 text node 执行匹配逻辑，所以调用前无需手动判断 nodeType。
为什么不用守卫 text node？
closest 是 Element 接口的方法，只能被元素节点（node.nodeType === 1）调用。如果你尝试对文本节点（node.nodeType === 3）调用 textNode.closest('.x')，会直接报错：TypeError: textNode.closest is not a function。也就是说，错误发生在调用那一刻，而不是匹配阶段。
因此，真正要防的不是“text node 被 closest 处理”，而是“误把非元素节点当元素传给 closest”。
实际该守卫什么？
重点应放在确保你调用 closest 的对象确实是 Element 实例：
- 事件委托中，永远用
event.target→ 但event.target可能是 text node、comment node 或 element node - 所以推荐写法是：
const el = event.target instanceof Element ? event.target : event.target.parentElement;，再调用el?.closest(selector) - 更简洁安全的写法（推荐）：
event.target.closest(selector)—— 因为现代浏览器中，closest在非 Element 上调用会报错，而event.target.closest实际执行时，浏览器内部已做类型判断：只有Element实例才进入查找逻辑；其他类型直接返回undefined或抛错（取决于实现），但主流引擎（Chrome/Firefox/Safari）对非 Element 的.closest()调用统一抛TypeError
稳妥的空值+类型防护写法
如果你需要兼容性更强或逻辑更显式，可这样写：
function safeClosest(target, selector) {
if (!(target instanceof Element)) return null;
return target.closest(selector);
}
// 使用
if (safeClosest(event.target, '.btn')) { ... }
注意：这个函数不是为防 text node 匹配（它压根不匹配），而是防止 TypeError 中断脚本执行。
常见误操作与纠正
- ❌ 错误地先取
event.target.parentNode再调用 closest：可能跳过目标元素自身，也增加空节点风险 - ✅ 正确做法：直接
event.target.closest('.x')，并配合可选链或空值判断：event.target.closest('.x')?.dataset.action - ❌ 做冗余检查如
if (event.target.nodeType === 1) { event.target.closest(...) }：多此一举，且漏掉shadowRoot.host等边界情况
