javascript - 如果单击复选框，防止触发 TD onclick？

Question

我有一个点击事件可以做到这一点：

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

但是在我的表中，我有一些带有复选框的 td，当单击这些复选框时，会导致事件触发。有没有办法在 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您的复选框的父级，然后一直上升到document，上面的代码基本上停止了从您的复选框的传播。

阅读事件冒泡

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!");    
    }
});