点击内嵌绑定onClick的td元素如何避免触发父tr的点击事件

问题原因 #

这是DOM事件冒泡机制的默认特性：子元素触发的点击事件会沿DOM树向上逐层传递，依次触发所有父级元素绑定的同类型事件。你点击第二个td元素时，事件先触发td绑定的click2，再向上冒泡到父级tr，所以同时触发了tr绑定的click1。

解决方法 #

只需要在click2的执行逻辑里终止事件继续向上冒泡即可，修改步骤如下：

1. 给第二个td的点击事件传入原生事件对象event
2. 在click2函数内调用stopPropagation()方法阻止冒泡

修改后的完整代码：

JS代码

function click1() {
  alert(1);
}

function click2(e) {
  // 阻止事件向上冒泡到父元素tr
  e.stopPropagation();
  alert(2);
}

HTML代码

<table border="1">
  <tr onClick="click1()">
    <td>
      click 1
    </td>
    <td onClick="click2(event)">
      click 2
    </td>
  </tr>
</table>

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