如何阻止锚点触发tr/td绑定的JavaScript？表格非锚区点击执行指定JS

这个问题的核心是事件冒泡——当你点击<a>标签时，事件会向上传递到它的父元素<td>，进而触发绑定的onclick逻辑。咱们可以通过两种简单的方式解决：

方法一：阻止锚点的事件冒泡 #

直接给每个<a>标签添加onclick事件，调用event.stopPropagation()来阻止事件向上冒泡。这样点击锚点时，只会执行它自身的跳转行为，不会触发父元素的alert：

<table border="1">
  <tr data-href="test">
    <td onclick="alert('this should work')" width="100" height="50">
      <a href="goaway" onclick="event.stopPropagation()">asdfasdf</a>
    </td>
    <td onclick="alert('this should work')" width="100" height="50">
      <a href="goaway" onclick="event.stopPropagation()">asdfasdf</a>
    </td>
  </tr>
</table>

方法二：在父元素事件中判断触发源 #

如果不想逐个修改锚点标签，可以把<td>的点击逻辑抽成一个函数，在函数里检查实际点击的元素是不是锚点（或者锚点的子元素），如果是就跳过执行：

<script>
function handleTdClick(event) {
  // 检查点击目标是否为锚点，或是否在锚点内部
  const isClickOnAnchor = event.target.tagName === 'A' || event.target.closest('a');
  if (!isClickOnAnchor) {
    alert('this should work');
  }
}
</script>
<table border="1">
  <tr data-href="test">
    <td onclick="handleTdClick(event)" width="100" height="50">
      <a href="goaway">asdfasdf</a>
    </td>
    <td onclick="handleTdClick(event)" width="100" height="50">
      <a href="goaway">asdfasdf</a>
    </td>
  </tr>
</table>

这种方法更灵活，哪怕锚点内部嵌套了其他元素（比如<span>），也能正确判断是否点击在锚点区域内。

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