点击嵌套元素时如何获取动态渲染的高阶父块ID？

这问题我太熟了！动态渲染的嵌套元素触发点击事件时，事件目标跑偏到子元素是很常见的情况，结合事件冒泡和DOM API的特性，给你几个靠谱的解决方案：

方案1：用closest()方法（最推荐） #

closest()是DOM元素的原生方法，它会从当前触发事件的元素开始，向上遍历整个DOM树，找到第一个匹配指定选择器的父级元素——不管这个父元素是不是直接父级，完美适配你说的“父块可能并非子元素直接父级”的场景，而且对动态渲染的元素也完全生效。

假设你的高阶父块有统一的标识（比如类名high-order-block，或者ID前缀是parent-），可以这样修改你的代码：

function saveID(e) {
  const display = document.getElementById("display");
  // 找到最近的高阶父块，这里用类选择器举例，你可以换成自己的标识
  const targetParent = e.target.closest('.high-order-block');
  
  if (targetParent?.id) {
    display.textContent = `获取到的父块ID：${targetParent.id}`;
  } else {
    display.textContent = "未找到目标父块";
  }
}

// 把事件委托绑定到一个静态的父容器（比如body，或者所有动态块的共同父元素）
document.body.addEventListener('click', saveID);

为什么这个方案好用？ #

• 无需提前知道具体的DOM元素，动态渲染的块也能被正确识别
• 不管子元素嵌套多少层，都能精准定位到最近的目标父块
• 原生API，性能稳定，兼容性好（除了非常老旧的IE浏览器）

方案2：事件委托结合currentTarget（适合直接绑定父块事件的场景） #

如果你的高阶父块是通过动态生成后直接绑定点击事件的（比如用addEventListener给每个新生成的父块绑定），那可以在事件处理函数里用e.currentTarget代替e.target——currentTarget永远指向绑定事件的那个元素，也就是你的高阶父块，而不管实际触发事件的是哪个子元素。

示例代码：

// 假设这是你动态生成父块的函数
function createHighOrderBlock(id) {
  const parentBlock = document.createElement('div');
  parentBlock.id = id;
  parentBlock.className = 'high-order-block';
  parentBlock.innerHTML = '<div class="nested-block">点击我</div>';
  
  // 直接给父块绑定点击事件
  parentBlock.addEventListener('click', function(e) {
    const display = document.getElementById("display");
    // currentTarget就是绑定事件的父块
    display.textContent = `父块ID：${e.currentTarget.id}`;
  });
  
  document.body.appendChild(parentBlock);
}

不过这个方案的局限性是，你需要在每个动态生成的父块上单独绑定事件，相比方案1的事件委托，代码量会多一点，所以更推荐方案1。

注意事项 #

• 一定要给你的高阶父块设置唯一的标识（类名、属性、ID规则），这样closest()才能精准定位，不会误选其他元素
• 如果你的页面里有很多类似的嵌套块，建议把事件委托绑定到更具体的静态容器（而不是body），这样能减少不必要的事件触发，提升性能

内容的提问来源于stack exchange，提问作者Alexander Prisazhny