javascript - 无法使用 :not() 将按钮定位为分离行为

Question

我有一个 HTML5 应用程序，其中有一个表(ID 是 #myTable 在这个问题的其余部分)。该表由 ajax 请求填充。

在 ajax 响应之后，表格的一行如下所示:

<tr>
    <td>ID 001</td>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    <td><a href="/fge?id=001" class="btn-fge">Find group entries</a></td>
</tr>

最后一列中的 anchor 并不存在于每一行中。它仅针对某些行出现。如果 anchor 未出现，则会呈现空行:<td></td> .

在添加此 anchor 之前，我编写了一个函数来切换每行的展开/折叠。扩展后，会发出额外的 ajax 请求来呈现更多数据。该行为使得用户可以单击行内的任意位置。

$('#myTable tbody').on('click', 'td', function (e) { 
    var tr = $(this).closest('tr');

    // Code to expand/collapse tr
    // ...

    // Ajax request for additional row data
    // ...
}

这一切都没有任何问题。

但是，我想隔离行为，以便在用户单击 anchor 时上面的代码不会触发。相反，如果他们单击行内除 anchor 之外的任何位置，则应该触发。

我已阅读 Check if clicked element doesn't have a specific class并试图瞄准 .btn-fge使用:not()条件如下。

$('#myTable tbody').on('click', 'td:not(.btn-fge)', function (e) {

}

这不起作用(尽管我相信这可能是因为 .btn-fge 不是 <td> 上的类，而是其中的 anchor ？)。折叠/展开行行为仍然会触发，然后浏览器重定向到 href值(value)。在给定的示例中，行为是:

1. 点击.btn-fge .
2. 该行已展开(或者如果已展开，则将折叠)。
3. 浏览器遵循 href上.btn-fge所以在这种情况下重定向到 /fge?id=001 .

我希望在单击 .btn-fge 时发生 (1)，然后发生 (3)，但不希望发生 (2) .

我尝试过记录console.log($(this));接下来是 e.preventDefault() 。我单击的行内的位置并不重要 - 无论它是否在按钮上 - 它都会提供相同的输出，如下所示。

如何定位此按钮，使按钮行为与单击行内其他位置不同？

我使用的是 jquery 版本 3.2.1，并且更喜欢 jquery 解决方案，但普通的 JavaScript 解决方案也可以接受。

编辑 - 我在这里做了一个 fiddle https://jsfiddle.net/adrq0nhz/如果您单击表格内的任意位置，它将控制台记录“这仍在触发”，这实际上是 anchor 没有单独行为的问题。 注意:.btn-fge类位于 anchor 上，而不是 <td> ，并且无法更改。

Answer 1

您可以使用事件对象的 target 属性来检查单击了哪个元素。

$('#myTable tbody').on('click', 'td', function(e) {
  //used prevent default for demonstration purposes to avoid the href link being opened.
  e.preventDefault();
  if ($(e.target).is('a.btn-fge')) {
    console.log('clicked on anchor with the class btn-fge');
  } else {
    console.log('clicked outside of anchor with the class btn-fge');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr>
      <td>ID 001</td>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
      <td><a href="/fge?id=001" class="btn-fge">Find group entries</a></td>
    </tr>
  </tbody>
</table>