当我单击链接时，jQuery 表行单击事件也会触发答案

【问题标题】：jQuery Table Row Click Event also firing when i click a link当我单击链接时，jQuery 表行单击事件也会触发
【发布时间】：2011-06-13 13:03:39
【问题描述】：

这是我目前所拥有的，获取行号效果很好，但我需要这样做，以便当我单击表中的链接时，它不会触发函数内的代码。

<table>
  <tr class="row">
    <td>A</td>
    <td><a class="link" href="foo.html">Foo</a></td>
  </tr>
  <tr class="row">
    <td>B</td>
    <td><a class="link" href="Bar.html">Bar</a></td>
  </tr>
</table>


<script>
$(function(){
    $('.row:not(.link)').click(function(){
        var $row = $(this).index();
    });
});
</script>

【问题讨论】：

你最好检查一下目标是否和你点击的一样。这涵盖了所有复选框/所有子项/未来证明。 stackoverflow.com/a/6411507/560287

标签： javascript jquery html

【解决方案1】：

选择器 .row:not(.link) 将选择所有具有类“row”但没有类“link”的元素，这不是您要查找的。p>

您需要在 a.link 元素的点击事件中使用 event.stopPropagation，这样点击事件就不会传播到包括行在内的父级。

试试这个：

<table>
    <tr class="row">
        <td>A</td>
        <td><a class="link" href="foo.html">Foo</a></td>
    </tr>
    <tr class="row">
        <td>B</td>
        <td><a class="link" href="Bar.html">Bar</a></td>
    </tr>
</table>

<script> 
    $(function(){     
        $('.row').click(function(){         
            var $row = $(this).index();     
        }); 
        $('.row .link').click(function(e){
            e.stopPropagation(); 
        });
    }); 
</script>

【讨论】：

-1 因为他编写的选择器虽然效率不高，但实际上会起作用，这与您的评论相反。
@Nathan：我从来没有提到选择器不起作用（选择器不是这里的问题）。我试图强调不需要该选择器，事实上 :not(.link) 在这种情况下是无用的。

【解决方案2】：

有点晚了，但这是我在谷歌中打开的第一个链接，以寻找相关主题的解决方案。因此，它可能对某人有用：

$(".clickableRow").click(function(e) {
  if (e.target.nodeName != "A") {
    window.document.location = $(this).attr("href");
  }
});

连续的链接，我的意思是标准，将照常工作，此示例标记将具有三个独立的链接激活：

<tr class="clickablerow" href="profile.html">

  <td>John Doe, the VP</td>
  <td><a href="print.html" target="_blank">Print</a><a href="chat.html" target="_blank">Chat</a></td>
    
</tr>

【讨论】：

【解决方案3】：

这是 jquery 中的快速修复，只需使用 instanceof

  $("#news-table tr").click(function(e){
      if((e.srcElement instanceof HTMLAnchorElement)!=true  )console.log("IIIIIIHA HA!");
  });

【讨论】：

【解决方案4】：

您需要在链接的点击事件中阻止event propagation - 这是一个示例：http://jsfiddle.net/6t8u7/1/

如您所见，单击链接只会触发一个事件。单击该行会触发另一个事件。

您获得当前行为的原因是来自链接的点击事件“冒泡”到父元素。

【讨论】：

【解决方案5】：

有了数据属性，就不需要类了：

$(document).on('click', '[data-href]', function(e) {
    if($(e.target).hasClass('ignore'))
        return;
    var ignore = ['input', 'a', 'button', 'textarea', 'label'];
    var clicked = e.target.nodeName.toLowerCase();
    if($.inArray(clicked, ignore) > -1)
        return;
    window.location = $(this).data('href');
});

使用示例（tr 只是一个示例 - 您可以使用 div 等）：

<tr data-href="your_url">
    <td class="ignore">Go nowhere</td>
    <td>Go to your_url</td>
    <td><a href="another_url">Go to another_url</a></td>
    <td><input type="text" value="Go nowhere"></td>
</tr>

【讨论】：

【解决方案6】：

您也可以在不显式选择第二个函数中的行的情况下使用它。

$(function(){     
    $('.row').click(function(){         
        var $row = $(this).index();     
    }); 
    $('.link').click(function(event){
       event.preventDefault();
       event.stopPropagation();
    });
});

【讨论】：

【解决方案7】：

只需添加：if (e.target.tagName == 'A') return; 到行点击，链接元素将使用自己的逻辑。

这里是更详细的例子：

$("#table tr").click(function(e) {

    // Skip if clicked on <a> element
    if (e.target.tagName == 'A') return;

    // Logic for tr click ...

});

【讨论】：

【解决方案8】：

也可以使用（特别是如果您使用带 span 的 href 或 href 中的其他嵌套项）：

    $(".row").click(function(e) {
        var hasHref = $(e.target).closest('td').find('a').length;

        if (! hasHref) {
            window.document.location = $(this).data("href");
        }
    });

【讨论】：