如何捕获动态加载DIV的点击事件并获取其data属性（排除内部元素）

最优方案：事件委托 + closest() 方法 #

直接把点击事件绑定到静态根节点（比如document），从点击的元素向上查找目标div，不管点的是div本身还是内部的<b>标签，都能精准定位到带data-lb_action属性的元素。

代码示例：

document.addEventListener('click', function(e) {
  // 从点击元素往上找第一个带data-lb_action属性的元素
  const targetDiv = e.target.closest('[data-lb_action]');
  if (targetDiv) {
    console.log('获取到的data属性值：', targetDiv.dataset.lb_action);
    console.log('完整的dataset对象：', targetDiv.dataset);
  }
});

方案优势

• closest() 会遍历当前元素及所有祖先元素，找到第一个匹配选择器的元素，完美解决子元素点击时e.target不是目标div的问题。
• 事件委托绑定在静态节点上，不管div是页面加载时就存在还是后来动态生成的，都能触发事件，不用每次生成元素都重新绑定监听。

备选方案：动态生成元素时直接绑定事件 #

如果动态生成逻辑可控，也可以在创建div时直接给它绑定点击事件，此时this或者e.currentTarget就是目标div，不受内部子元素影响。

代码示例：

// 假设这是生成动态div的函数
function addDynamicDiv() {
  const newDiv = document.createElement('div');
  newDiv.dataset.lb_action = 99;
  newDiv.innerHTML = 'This text works but <b>this text doesn\'t</b>';
  
  // 直接给div绑定点击事件
  newDiv.addEventListener('click', function() {
    console.log('data属性值：', this.dataset.lb_action);
  });
  
  // 将div添加到页面
  document.body.appendChild(newDiv);
}

这种方法适合动态元素数量少的场景，若频繁生成元素，事件委托的方式更高效。

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