Question

我有一个html表，应该做两件事：

1）在表格中我需要显示一些锚点

2）如果点击锚点以外的任何地方我希望它执行某个javascript

这是我到目前为止所拥有的：

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

$(document).ready(function() {
    $('tr[data-href]').click(function () {
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
    });
});

因此，当点击该表内的任何地方时，我的javascript被执行，这很好。问题是，当我点击锚时，它也会执行，我想避免。怎么可以避免？

JSFiddle：https://jsfiddle.net/o2gxgz9r/35761/

编辑：实际上我的一些锚点可能有一个onclick事件，所以应该仍然可以工作，只需要明确避免tr [data-href]动作。

Answer 1

您应该使用event.stopPropagation() https://api.jquery.com/event.stoppropagation/

JSFiddle：https://jsfiddle.net/o2gxgz9r/35756/

Answer 2

由于您拥有的点击处理程序的元素多于锚点a和表格行tr，因此您可以使用if (e.target == this)确保每个元素类型都运行其预期的代码

有了这个，this表示事件处理程序设置的元素，e.target被点击的元素，当它们匹配时，您将知道被点击的是哪一个。

Stack snippet

$(document).ready(function() {
    $('tr[data-href]').click(function (e) {
      if (e.target == this) {
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
      }
    });
    $('tr[data-href] td').click(function (e) {
      if (e.target == this) {
        alert('this should work');
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr data-href="test" >
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
  </tr>
</table>

考虑到这一点，并且如果某些单元格td可能没有点击处理程序，您可以停止在它们上传播，就好像，并且有人点击这样的单元格，表格行tr处理程序不会运行。

现在，在tr处理程序中，我们需要检查所点击的元素不是锚a类型。

Stack snippet

$(document).ready(function() {
    $('tr[data-href]').click(function (e) {
      if (e.target.tagName.toLowerCase() != 'a') {
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
      }
    });
    $('tr[data-href] td:first-child').click(function (e) {
      if (e.target == this) {
        alert('this should work');
      }
      e.stopPropagation();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr data-href="test" >
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
  </tr>
</table>

如果您将使用内联脚本，则会更加复杂，您需要检入tr处理程序，因此它不是锚a或单元格td一个onclick属性，可能看起来像这样，并将stopPropagation()添加到那些父级td和内联onclick处理程序的锚点。

Stack snippet

$(document).ready(function() {
    $('tr[data-href]').click(function (e) {
      if (e.target.tagName.toLowerCase() != 'a' && !e.target.hasAttribute('onclick')) {    
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
      }
    });
    $('tr[data-href] td[onclick] a').click(function (e) {
        e.stopPropagation();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr data-href="test" >
    <td onclick="alert('this should work')" width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
  </tr>
</table>

阻止锚点触发针对tr / td

2 个答案: