如何解决表格行与行内动态生成按钮的点击事件冲突

点击按钮产生的点击事件会遵循DOM事件冒泡规则，从按钮本身开始，沿着DOM树逐级向上传递到父级的td、tr元素，最终触发tr上绑定的点击回调，造成按钮逻辑和行逻辑双重触发。

你的按钮是通过appendChild动态创建插入的，不需要改动现有DOM构建流程，两种可直接落地的隔离方式：

• 方案1：在按钮的点击监听内主动阻断冒泡（最常用，逻辑边界最清晰）
  在按钮的点击事件回调中，调用事件对象的stopPropagation方法，直接切断当前事件的向上传递路径，事件不会再传递到父级的tr元素，自然不会触发行的点击逻辑。
  对应修改后的按钮绑定代码：

  r1c2Button.addEventListener("click", (e) => {
    // 阻止事件向父级行元素冒泡
    e.stopPropagation()
    alert("R1C2 Button clicked")
  })
  

  这个方案完全兼容createElement+appendChild的动态插入流程，不需要改动现有DOM创建、插入的业务逻辑。
• 方案2：在行的点击监听内做点击源判断
  如果后续同个行内会插入多个交互元素，不想每个元素都单独加阻断冒泡的代码，可以在tr的点击回调里判断当前点击的实际目标是否为按钮，是的话直接跳出行逻辑：

  r1.addEventListener("click", (e) => {
    // 点击源是按钮时，不执行行的点击逻辑
    if (e.target.closest('button')) return
    alert("R1 clicked")
  })
  

• 别把stopPropagation和preventDefault搞混：后者只能阻断浏览器的默认行为（比如按钮提交表单、链接跳转），完全无法阻断事件冒泡，解决不了当前的双重触发问题
• 上述两种方案都不需要依赖提前绑定的事件委托逻辑，和你“动态创建按钮→绑定监听→appendChild插入DOM”的流程完全适配

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