Javascript 当我单击链接时，jQuery 表行单击事件也会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6330763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Table Row Click Event also firing when i click a link
提问by Brandon
Here is what i have so far, getting the row number is working great but i need to make it so that when i click on the link in the table, it doesnt fire the code inside the function.
这是我到目前为止所拥有的，获取行号效果很好，但我需要这样做，以便当我单击表中的链接时，它不会触发函数内的代码。
<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>
回答by Chandu
The selector .row:not(.link) will select all elements that have a class "row" and don't have the class "link", which is not what you are looking for.
选择器 .row:not(.link) 将选择所有具有“row”类但没有“link”类的元素，这不是您要查找的。
You need to use event.stopPropagation within the click event of the a.link elements so that the click event is not propagated to the parents, which includes row.
您需要在 a.link 元素的单击事件中使用 event.stopPropagation，以便单击事件不会传播到父级，其中包括行。
Try this:
尝试这个：
<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>
回答by ermushko
Just a bit late, but this is first link in Google I opened in search for solution to relative topic. So, it may become useful for someone:
有点晚了，但这是我在 Google 中打开的第一个链接，用于搜索相关主题的解决方案。因此，它可能对某人有用：
$(".clickableRow").click(function(e) {
if (e.target.nodeName != "A") {
window.document.location = $(this).attr("href");
}
});Links in a row, I mean standart , will work as usual, and this example markup will have three independent link activations:
连续链接，我的意思是标准，将照常工作，并且此示例标记将具有三个独立的链接激活：
<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>回答by Jacek G?odek
Heres a quick fix in jquery, just use instanceof
这是 jquery 中的一个快速修复，只需使用 instanceof
$("#news-table tr").click(function(e){
if((e.srcElement instanceof HTMLAnchorElement)!=true )console.log("IIIIIIHA HA!");
});
回答by Nathan
You need to prevent event propagationin the click event of the links - here's a sample: http://jsfiddle.net/6t8u7/1/
您需要防止链接的点击事件中的事件传播- 这是一个示例：http: //jsfiddle.net/6t8u7/1/
As you can see, clicking on the link just fires one event. Clicking on the row fires the other event.
如您所见，单击链接只会触发一个事件。单击该行会触发另一个事件。
The reason you're getting the current behaviour is that the click event from the link "bubbles up" to the parent element.
您获得当前行为的原因是从链接“冒泡”到父元素的点击事件。
回答by rybo111
With a data attribute, there's no need for a class:
有了 data 属性，就不需要类了：
$(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');
});
Usage example (tris just an example - you can use div, etc):
用法示例（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>
回答by john
You can also use this without explicitly selecting the row in the second function.
您也可以在不显式选择第二个函数中的行的情况下使用它。
$(function(){
$('.row').click(function(){
var $row = $(this).index();
});
$('.link').click(function(event){
event.preventDefault();
event.stopPropagation();
});
});
回答by Kroksys
Just add: if (e.target.tagName == 'A') return;to row click and Link element will use its own logic.
只需添加：if (e.target.tagName == 'A') return;行点击和链接元素将使用自己的逻辑。
Here is more detailed example:
这是更详细的示例：
$("#table tr").click(function(e) {
// Skip if clicked on <a> element
if (e.target.tagName == 'A') return;
// Logic for tr click ...
});
