使表格行可点击链接，但让TD中的链接仍然有效

Question

第一个要求是使表行的行为类似于可单击的链接。

各种好的资料指出，您必须使用javascript来实现这一点，我选择了这一点使表行可点击

它在TR标签中使用jQuery和link-data属性。

但是，我希望使TD单元内的所有<a>标签链接也能正常工作。 期望的结果是，如果您单击表中的链接，它将正常工作，但是，如果您单击TR上的其他任何地方，它将转到链接数据URL。

这是我目前拥有的，但是在该行的任何位置单击或不单击，都会链接到数据链接地址。

$("tr[data-link]").click(function() {
  window.location = this.dataset.link;
});

<tr class="clickable-row" data-link="/invoices/10">
  <td>6</td>
  <td>2014-06-09</td>
  <td></td>
  <td>&pound;343,242.00</td>
  <td>&pound;68,640.00</td>
  <td><a href="/jobs/770">0453</a></td>
</tr>

我在想在jQuery / Javascript中进行某种检查

Answer 1

你应该做这个：

 $("tr[data-link]").click(function(e) {
   if(e.toElement.tagName=='A') return
   window.location = this.dataset.link;
});

如果用户单击A元素，则该功能将不会执行（返回）。

Answer 2

Amina的答案仍然正确。 但是自从使用它以来，我发现了一个后续的错误，我想指出一点。

IE为其他浏览器提供了（e）一个不同的对象。 因此，要使IE使用此技术，您将需要在JavaScript中添加以下三行以预过滤事件对象。

$("tr[data-link]").click(function(e) {
  // Catch where i.e. doesnt give us the clicked object.
  var elem, evt = e ? e:event;
  if (evt.srcElement)  elem = evt.srcElement;
  else if (evt.target) elem = evt.target;
  // If Anchor, or form input, return and do normal stuff  
  if(elem.tagName=='A' || elem.tagName=='INPUT') return;
  window.location = this.dataset.link;
});

另外请注意，额外的tagName =='INPUT'是我自己将来添加的，因此单击中的任何输入字段也将被忽略。