Javascript 如何防止使用onclick事件的表中的复选框传播其自己的click事件？

我有一个表格，可以使用

onclick

处理整行的鼠标单击。问题是这些行还包含不应激活onclick事件的复选框。单击一行应导致事件，但选中复选框不应导致事件

我找到了很多答案，但我一直无法让它起作用。我使用的是简单的html/css/js，没有任何类似jQuery的东西

答案似乎是由于事件传播，很多答案都说使用

stopPropagation（）

。但Chrome表示，该功能在该事件中未定义

这是我的测试示例

单击表格会导致“表格！”警报。我不希望单击表中的复选框导致此警报

功能点击表（e）{
警报（'table！'）；
}
功能点击复选框（e）{
//错误：例如，StopperPogation不是一个函数
e、 停止传播（）；
}

表格{
边框：1px纯黑；
宽度：120px；
高度：120px；
}
输入{
宽度：32px；
高度：32px；
}

复选框单击

内联事件侦听器不会将事件对象传递给函数

因此，函数不接收事件对象（

e

）参数，从而阻止您调用

stopPropagation（）

方法

这就是为什么我还建议您避免使用内联事件侦听器

如果需要调用事件的元素，而不是使用

this

，则可以使用

e.target

获取事件的目标元素

功能点击表（e）{
警报（'table！'）；
}
功能点击复选框（e）{
e、 停止传播（）；
}
const tr=document.querySelector（'tr'）；
const input=document.querySelector（'input[type=checkbox'）；
tr.addEventListener（“单击”，单击表格）；
input.addEventListener（“单击”，单击复选框）
表格{
边框：1px纯黑；
宽度：120px；
高度：120px；
}
输入{
宽度：32px；
高度：32px；
}

复选框单击
.stopPropagation（）
是正确的方法，但要使用它，必须在传递给事件处理程序的
事件
对象引用上调用它。此对象引用将自动传递给DOM事件处理程序，这些事件处理程序是使用方法设置的，而不是使用传统的
onXyz
内联事件属性（）

而且，当使用
.addEventListener（）
设置DOM事件处理程序时，无需传递
此
，因为
此
将自动绑定到首先触发事件的元素，因此您可以在回调函数中使用
此
，而无需传递它

此外，您的HTML无效<代码>

元素属于

元素内部，而不是

元素

因此，只需重新设置事件处理程序：

表格{
边框：1px纯黑；
宽度：120px；
高度：120px；
}
输入{
宽度：32px；
高度：32px；
}

//使用JavaScript而不是HTML进行事件绑定
document.querySelector（“输入[name='test']”）。addEventListener（“单击”，单击复选框）；
document.querySelector（“thead”）。addEventListener（“单击”，单击表格）；
功能点击表（e）{
警报（'table！'）；
}
功能点击复选框（e）{
//现在，e将正确地接收事件引用
e、 停止传播（）；
}

您应该使用事件委派，您将使用

Event.target在表中单击元素，并相应地执行操作


document.querySelector（“表”）.addEventListener（“单击”），函数（事件）{
event.target？console.log（event.target.nodeName）：console.log（event.target.nodeName）
});
表格{
边框：1px纯黑；
宽度：120px；
高度：120px；
}
输入{
宽度：32px；
高度：32px；
}

复选框单击
我会触发对单元格而不是行的单击。每个单元格都应该有一个公共类，除了持有复选框的那一个。这可能就是我最后要做的。与激活整行事件相比，最好让带有复选框的单元格也选中复选框，以解释不准确的单击。不过，我仍然有兴趣了解我在示例中做错了什么。如果我没有做错的话，应该是event.stopPropagation（）而不是e.stopPropagation（），我相信这只是
window.event
的缩写。它也被设计成不推荐使用的样式。不确定不推荐使用的样式。请参阅文档：将this关键字传递给函数是事件对象没有stopPropagation Ohh。。。我的错。Will edit answerInline事件侦听器不会将事件对象传递给函数，这就是为什么事件对象没有stopPropagation（）事件委派是一件好事，但从技术上讲，这并不是解决此问题的方法。只是内联事件处理程序没有将触发它们的事件对象传递给事件回调。您不需要使用事件委派来执行此操作。@ScottMarcus我的观点是，删除内联事件处理程序时，它们应该/不能作为解决问题的建议。您可以删除内联事件属性，并使用
.addEventListener（）
，而不使用事件委派。正如我所说，在这种情况下，事件委托是一个很好的用途，但与所问的问题无关。