jQuery Table Row单击事件也触发当我点击一个链接

这是我迄今为止，获得行号工作很好，但我需要使它，以便当我点击表中的链接，它doesnt激发函数内部的代码。jQuery Table Row单击事件也触发当我点击一个链接

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

来源

2011-06-13 Brandon

你最好检查如果目标是一样的，你点击了什么。涵盖所有复选框/所有儿童/未来证明。 http://stackoverflow.com/a/6411507/560287 – 2014-05-21 15:21:12

的选择.row：没有（。链路）将选择有一个类“行”和不具备类“链接”，这是不是你所期待的所有元素。

您需要在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>

来源

2011-06-13 13:06:38 Chandu

-1，因为他写的选择器虽然效率不高，但实际上可行，与您的评论相反。 – Nathan 2011-06-13 13:17:55

@Nathan：我从来没有提到选择器不起作用（而选择器不是问题在这里）。我试图强调那个选择器是不需要的，事实上：在这种情况下，不（.link）是无用的。 – Chandu 2011-06-13 13:19:17

'e.stopPropagation（）;'解决了我的问题。 – 2014-09-18 21:06:42

您需要防止event propagation中的链接的单击事件 - 这里有一个例子：http://jsfiddle.net/6t8u7/1/

正如你可以看到，点击链接只是触发一个事件。点击行可触发其他事件。

您得到当前行为的原因是，链接中的单击事件“冒泡”到父元素。

来源

2011-06-13 13:07:05 Nathan

继承人jQuery中速战速决，只要使用的instanceof

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

来源

2012-06-30 09:13:28

只是有点晚了，但是这是在谷歌我在寻找开放的解决方案相对话题第一个链接。因此，它可能有人成材：

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

来源

2015-08-25 09:06:08 ermushko

与数据属性，没有必要为CL屁股：

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

来源

2016-08-15 08:47:28 rybo111

您还可以使用此而不在第二个功能明确选择行。

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

来源

2016-11-08 12:11:15 john

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

这里有更详细的例子：

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

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

    // Logic for tr click ... 

});

来源

2017-11-27 13:24:24 Kroksys

jQuery Table Row单击事件也触发当我点击一个链接

回答

相关问题