推荐使用 closest() 方法——它原生支持、语义清晰、兼容 IE9+，且一步到位；event.target.closest('selector') 从自身向上查找首个匹配祖先（含自身），不匹配返回 null，需空值判断。
用 event.target 向上查找最近的指定父级节点，推荐使用 closest() 方法——它原生支持、语义清晰、兼容性好（IE9+），且一步到位。
用 closest() 直接匹配最近祖先
closest() 从事件目标自身开始向上遍历 DOM 树，返回第一个匹配选择器的祖先元素（包括自身）。这是最简洁可靠的方案：
- 语法：
event.target.closest('selector') - 支持任意 CSS 选择器：类名（
.btn）、标签（button）、属性（[data-action]）、复合选择器（.list-item a） - 不匹配则返回
null，需做空值判断
示例：
document.getElementById('list').addEventListener('click', function(e) {
const item = e.target.closest('.list-item');
if (item) {
console.log('点击了列表项：', item);
}
});兼容旧版 IE（如 IE8）时手动遍历
若必须支持 IE8，closest() 不可用，需手动向上查找：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 用
while循环 +parentNode逐级向上 - 用
matches()（或 IE8 的msMatchesSelector）判断是否匹配 - 注意排除
document和null防止死循环
简易兼容写法：
function closest(el, selector) {
while (el && el !== document) {
if (el.matches && el.matches(selector)) return el;
if (el.msMatchesSelector && el.msMatchesSelector(selector)) return el;
el = el.parentNode;
}
return null;
}
<p>// 使用
list.addEventListener('click', function(e) {
const btn = closest(e.target, 'button[data-action]');
if (btn) { /<em> 处理 </em>/ }
});避免误匹配：注意事件目标可能是文本节点
event.target 可能是子元素内的文本节点（比如按钮里的文字），而文本节点没有 closest() 方法，会报错：
- 安全做法：先确保
event.target是元素节点，或直接对e.target调用closest()（现代浏览器中，文本节点调用closest()返回null，不会报错） - 更稳妥可加类型判断：
if (e.target.nodeType === Node.ELEMENT_NODE) - 实际开发中，直接用
e.target.closest(...)即可，主流浏览器已妥善处理
不用 parentElement 或 parentNode 链式调用的原因
手动写 e.target.parentElement.parentElement.querySelector(...) 不可靠：
- 层级不确定：DOM 结构可能嵌套多层或少层
- 易断裂：某个中间节点缺失就会返回
undefined - 无法表达“最近一个”语义，只能固定跳几级
- 不如
closest()简洁、健壮、可读性强
