如何使用Javascript将表行链接到外部URL？

我在我的应用程序中有这样一个表：

<tr data-url="/entry/57/edit">
  <td>
    Text
  </td>
  <td>
    <a href="https://www.external.com">Link 1</a>
  </td>
  <td>
    <a href="https://www.external.com" target="_blank">Link 2</a>
  </td>
</tr>

为什么点击链接1会让我进入

www.external.com

（这是我想要的），而点击链接2会让我进入

/entry/57/edit

（这不是我想要的）

---

我希望两个链接都能将我带到

www.external.com

。如何做到这一点？

正如Pavel已经指出的，您需要停止事件传播。否则，在打开新选项卡后，事件仍会传播到表行的单击处理程序

将单击侦听器添加到将停止事件传播的锚应该可以解决您的问题

function TableRow() {

  const rows = document.querySelectorAll('table tr[data-url]');

  rows.forEach(row => {
    row.addEventListener('click', function(e) {
      handleClick(row, e);
    });
  });

  function handleClick(row, e) {
    let url = row.getAttribute('data-url');
    window.document.location = url;
  }

  const anchors = document.querySelectorAll('table tr[data-url] a');
  anchors.forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  });

}

document.addEventListener('DOMContentLoaded', TableRow);

---

stopPropagation（）

？HTML有充分的理由禁止嵌套“交互式”元素，如链接。在这里，您试图通过JavaScript实现一些HTML不完全允许的东西，“通过后门”。IMHO不需要技术解决方案，但这是一个需要纠正的UI/UX故障。

function TableRow() {

  const rows = document.querySelectorAll('table tr[data-url]');

  rows.forEach(row => {
    row.addEventListener('click', function(e) {
      handleClick(row, e);
    });
  });

  function handleClick(row, e) {
    let url = row.getAttribute('data-url');
    window.document.location = url;
  }

  const anchors = document.querySelectorAll('table tr[data-url] a');
  anchors.forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  });

}

document.addEventListener('DOMContentLoaded', TableRow);