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

jQuery Table Row Click Event also firing when i click a link

本文关键字：单击 事件 jQuery 链接      更新时间：2023-09-26

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

<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）将选择所有具有类"row"而没有类"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>

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

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

一行中的链接，我的意思是standart，将照常工作，并且这个示例标记将有三个独立的链接激活：

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

jquery中有一个快速修复方法，只需使用的实例

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

您需要防止链接的点击事件中的事件传播-下面是一个示例：http://jsfiddle.net/6t8u7/1/

正如您所看到的，点击链接只会触发一个事件。单击该行将触发另一个事件。

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

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

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

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

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

只需添加：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 ...
});

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

    $(".row").click(function(e) {
        var hasHref = $(e.target).closest('td').find('a').length;
        if (! hasHref) {
            window.document.location = $(this).data("href");
        }
    });
相关文章：