Question

我有点击事件：

$('table tbody td').click( function (e) {
   // How to check if checkbox was clicked before doing the alert below?
   alert("td clicked");
}

但是在我的表格中，我有一些带有复选框的标签，点击后会导致事件触发。有没有办法在Jquery中指定检查td中的单击是否在复选框上并且不警告？

Answer 1

您可以告诉jQuery停止复选框将活动从checkbox传播到您的td

$('table tbody td input[type=checkbox]').click( function (e) {
   // How to check if checkbox was clicked before doing the alert below?
   e.stopPropagation();
}

基本上会发生这种情况，因为当您点击checkbox时，浏览器会将click事件从您的复选框冒泡到您的复选框的父级，然后一直上升到{{1}上面的代码基本上停止了复选框的传播。

阅读event bubbling

Answer 2

这假设有问题的复选框与可点击的单元格在同一个表格行上。

$('table tbody td').click( function (e) {

   if(!$(this).parent().find(':checkbox').prop("checked"))
       return;

   alert("td clicked");
}

Answer 3

您可以使用传递给click函数的eventObject来查找目标并使用它来决定要执行的操作：

$("table tbody td").click(function(e){
    if(e.target.nodeName.toUpperCase() == "INPUT"){
        alert("It's an input!");
    }else{
        alert("It's not an input!");    
    }
});

如果单击复选框，阻止TD onclick触发？

3 个答案: