JavaScript 事件委托怎么获取最近的特定父级节点-js教程-PHP中文网

推荐使用 closest() 方法——它原生支持、语义清晰、兼容 ie9+，且一步到位；event.target.closest('selector') 从自身向上查找首个匹配祖先（含自身），不匹配返回 null，需空值判断。

javascript 事件委托怎么获取最近的特定父级节点

用 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() 不可用，需手动向上查找：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

用 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>/ }
});</p>

避免误匹配：注意事件目标可能是文本节点

event.target 可能是子元素内的文本节点（比如按钮里的文字），而文本节点没有 closest() 方法，会报错：

安全做法：先确保 event.target 是元素节点，或直接对 e.target 调用 closest()（现代浏览器中，文本节点调用 closest() 返回 null，不会报错）
更稳妥可加类型判断：if (e.target.nodeType === Node.ELEMENT_NODE)
实际开发中，直接用 e.target.closest(...) 即可，主流浏览器已妥善处理