Javascript jQuery表行单击事件在单击链接时也会触发

到目前为止，获取行号非常有效，但我需要这样做，当我单击表中的链接时，它不会触发函数中的代码

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

---

选择器.row:not.link将选择所有有类行但没有类链接的元素，这不是您要查找的

您需要在a.link元素的click事件中使用event.stopPropagation，以便click事件不会传播到父级（包括行）

试试这个：

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

您需要防止链接发生单击事件-以下是一个示例：

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

---

获取当前行为的原因是链接中的单击事件会冒泡到父元素。

这里有一个jquery中的快速修复方法，只需使用instanceof

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

---

虽然有点晚了，但这是我在谷歌搜索相关主题解决方案时打开的第一个链接。因此，它可能对某些人有用：

$.clickableRow.ClickFunction{ 如果e.target.nodeName！=A{ window.document.location=$this.attrref； }

---

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

$(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等：

---

您也可以使用它，而无需在第二个函数中显式选择行

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

只需添加：如果e.target.tagName=='A'返回；单击并链接行元素将使用其自己的逻辑

下面是更详细的示例：

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

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

    // Logic for tr click ...

});

---

也可以使用，特别是当您将href与span或href中的其他嵌套项一起使用时：

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

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

---

-1因为他写的选择器虽然效率不高，但实际上可以工作，这与你的评论相反。@Nathan:我从来没有提到选择器不能工作，而选择器不是这里的问题。我想强调的是，选择器是不需要的，事实上：not.link在这种情况下是无用的。最好检查一下目标是否与您单击的相同。包括所有复选框/所有儿童/未来证明。

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

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