防止点击复选框时触发TD点击

Prevent TD onclick from firing if a checkbox is clicked?

本文关键字：TD 点击 复选框      更新时间：2023-09-26

我有一个点击事件来做这个事情：

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

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

你可以告诉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，上面的代码基本上停止了从复选框传播。

在活动冒泡时阅读

这假定有问题的复选框与可单击单元格位于同一表格行上。

$('table tbody td').click( function (e) {
   if(!$(this).parent().find(':checkbox').prop("checked"))
       return;
   alert("td clicked");
}

您可以使用传递给单击函数的事件对象来查找目标，并使用它来决定要执行的操作：

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