<tr> 的点击功能有问题答案

【问题标题】：Having issue with click function for <tr><tr> 的点击功能有问题
【发布时间】：2012-03-03 01:12:07
【问题描述】：

HTML

<tr url="domain.com">
<td><input type="checkbox" name="checkbox[]" method="post" value="" class="checkbox" />  </td>
</tr>

$("tr").not('.checkbox').click(function(){
    window.location = $(this).attr("url");

});

想要禁用点击框内的点击功能，但上面的代码不起作用：即使我点击复选框，它也会重定向。我哪里做错了？

【问题讨论】：

我建议您使用data- 语法。 <tr data-custom-url="http://domain.com"> 并以$("selector").data("custom-url"); 访问它。顺便说一句，如果我没记错的话，你还必须指出 url 的协议。

【解决方案1】：

$("tr").not('.checkbox')

此代码将匹配所有不属于checkbox 类的tr 元素。如你所见，你的tr 没有那个类，所以这个tr 会匹配。

有两种基本方法可以做您想做的事情。您可以在函数中检查原始单击的元素是什么，如果它是一个复选框，则不要重定向。或者，您可以将点击处理程序添加到复选框并调用e.stopPropagation()。

$("tr .checkbox").click(function(e){
    e.stopPropagation();
});

【讨论】：

【解决方案2】：

添加一个单独的处理程序来停止传播。

$("tr").click(function(){
    window.location = $(this).attr("url");
})
  .find(".checkbox").click(function(e) { e.stopPropagation(); });

【讨论】：

【解决方案3】：

只需在下面的复选框上停止事件传播，

$('.checkbox').click(function(e){
   e.stopPropagation();
});

修正了错字。

【讨论】：

【解决方案4】：

在复选框单击时停止事件传播。试试这个。

$('.checkbox').click(function(e){
   e.stopPropagation();
});

并将您的代码更改为

$("tr").click(function(){
    window.location = $(this).attr("url");

});

或者，您可以检查目标并采取相应措施。试试这个。

$("tr").click(function(e){
    if(!$(e.target).is(':checkbox')){
       window.location = $(this).attr("url");
    }
});

【讨论】：