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

Question

我的应用程序有这样的表格：

<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>

这是我的 Javascript：

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;
  }

}

document.addEventListener('DOMContentLoaded', TableRow);

为什么点击链接 1会带我到www.external.com（这是我想要的）但点击链接 2会带我到/entry/57/edit（这不是我想要的）？

我希望这两个链接都带我到www.external.com. 如何才能做到这一点？

标签： javascript

Answer 1

正如 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);