在表行上单击事件 - 仅在没有其他"点击"的情况下触发

kas*_*ter 12 jquery onclick

我遇到了一些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>
Run Code Online (Sandbox Code Playgroud)

现在通过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");
   }
});
Run Code Online (Sandbox Code Playgroud)

所有这些都是非常简单的东西 - 我希望能够点击一行并使其突出显示,并且一次只能突出显示一行(显然在我的实际代码中我做的不止这些) - 现在这是我的问题:

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

tva*_*son 15

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

jQuery('table input, table a').click( function(e) {
    e.stopPropagation();
    return true;
}):
Run Code Online (Sandbox Code Playgroud)

  • @darkapple事件通过DOM向更高级别元素的处理程序冒泡.通过停止传播,我们告诉浏览器不要将事件传递给这些元素,因此永远不会调用它们的处理程序.返回true允许元素的默认操作继续(例如,要转到新页面的链接).因此,在这种情况下,我们不会调用处理程序,如果单击链接或复选框,则不会调用行突出显示,但是如果行中有其他内容则是. (2认同)