12

我在使用一些 jQuery 代码时遇到了一些问题，我希望并认为解决方案相对简单。

假设我有一张像这样的桌子：

<table>
   <tr>
     <td><input type="checkbox" name="hai" value="der" /></td>
     <td><a href="mypage.php">My link</a></td>
     <td>Some data</td>
     <td>Some more data</td>
   </tr>
   ...
</table>

现在通过 JavaScript，我在 jQuery(document).ready(); 中执行以下操作

jQuery("table tr").click(function(){
   var row = jQuery(this);
   var hasClass = row.hasClass("highlight");
   jQuery("table tr").removeClass("highlight");
   if(!hasClass){
     row.addClass("highlight");
   }
});

所有这些都是非常简单的东西 - 我希望能够单击一行并突出显示它，一次只能突出显示一行（显然在我的实际代码中我做的不止这些） - 现在这是我的问题：

当用户单击锚标记或复选框时，这也会触发行单击事件，我无法弄清楚如何过滤掉它？我知道我需要在我的点击处理程序中包含该事件，但是如何以一种可以在尽可能多的浏览器中工作的方式来检查它呢？

4

3 回答 3

15

尝试将处理程序添加到响应单击事件并阻止事件冒泡的其他元素。这将是您已经拥有的东西的补充。

jQuery('table input, table a').click( function(e) {
    e.stopPropagation();
    return true;
}):
于 2009-05-18T12:20:34.697 回答
3 
$("table tr").click(function(event){
   if (event.currentTarget.tagName != "TR") { return; }

   $(this).closest("table").find("tr.highlight").removeClass("highlight");
   $(this).addClass("highlight");
});
于 2009-05-18T12:58:54.277 回答
1 
$("table tr").click(function(e){

if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
return;
}
var row=$(this);
$('table tr').removeClass('highlight');
row.addClass('highlight','normal');

})
于 2009-05-18T12:42:41.173 回答