表格<tr>的onclick与内部<a>冲突，如何让<a>优先触发点击事件？

当然可以让标签的点击事件优先触发，完全不用把onclick处理函数加到除包含的之外的每个上！问题的核心是事件冒泡机制：默认情况下，点击子元素的事件会向上冒泡到父元素，导致的onclick也被触发，覆盖了的跳转行为。我们只需要阻止的点击事件冒泡到父元素即可。

方法1：直接在标签中添加阻止冒泡的代码 #

最简单的方式是给的onclick属性添加事件阻止冒泡的逻辑：

<table>
  <tr onclick="window.location='foo.html'">
    <td>Data 1</td>
    <td>Data 2</td>
    <td><a href="bar.html" onclick="event.stopPropagation()">link</a></td>
  </tr>
</table>

event.stopPropagation()会阻止当前事件继续向上冒泡到父元素（也就是），这样点击链接时，只会执行的默认跳转行为，不会触发的onclick跳转。

方法2：使用非侵入式JavaScript（推荐） #

如果更倾向于将JS代码与HTML结构分离，可以用addEventListener来绑定事件：

// 获取目标<a>元素
const link = document.querySelector('table tr td a');
// 添加点击事件监听
link.addEventListener('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡
});

这种写法更符合现代前端开发的规范，也便于后续维护。

兼容老浏览器的写法 #

如果需要兼容IE8及更早版本（这类浏览器不支持stopPropagation()），可以用兼容写法：

function stopEventBubble(e) {
  e = e || window.event; // 兼容IE的事件对象
  if (e.stopPropagation) {
    e.stopPropagation(); // 标准浏览器
  } else {
    e.cancelBubble = true; // IE8及以下
  }
}

然后在标签中调用这个函数：

<a href="bar.html" onclick="stopEventBubble(event)">link</a>

补充说明 #

为什么会出现跳转冲突？因为点击时，事件会先触发的点击逻辑，然后向上冒泡到触发它的onclick。而里的window.location会立即跳转页面，导致的默认href跳转被覆盖。阻止冒泡后，的onclick不会被触发，浏览器就能正常执行的跳转了。