HTML表格<tr>绑定跳转事件后如何阻止指定<td>触发父元素跳转

这个问题的核心是DOM的事件冒泡机制：子元素触发的点击事件会默认向上层DOM节点传递，因此点击<td>时也会触发父元素<tr>绑定的点击跳转逻辑。你可以通过以下两种方案实现需求：

方案1：在特殊的点击事件中阻止冒泡 #

在该<td>的展开逻辑处理函数的最开头添加阻止冒泡的代码即可，如果你是行内绑定事件，修改<td>代码如下：

<td id="dtr-control" onclick="event.stopPropagation(); /* 此处保留你原本的展开功能代码 */"></td>

如果你是通过JS单独绑定事件，在事件处理函数内首行添加：

// 你的td展开事件处理函数
function expandControl(e) {
  e.stopPropagation()
  // 原有展开逻辑不变
}

方案2：在的跳转逻辑中判断触发源 #

如果<td>的展开逻辑是第三方组件自动生成、你不方便直接修改的话，可以直接调整<tr>的点击逻辑，只有点击源不是该特殊<td>时才执行跳转：
修改<tr>的onclick代码如下：

<tr type="button" onclick="if(event.target.id !== 'dtr-control') window.location.href = '/xxx/bbb/001';">

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