Javascript 隔离重叠行中的单击侦听器并单击按钮

我有一个如下表：一列显示文本，另一列包含按钮。 我需要实现两种不同的操作：一种是单击行本身，另一种是单击按钮

但在下面的代码中，我无法在单击按钮时隔离这两个事件：这意味着，这两个操作都会执行，因为行也被视为“已单击”。我如何区分这两个事件？我必须使用

appendChild

，因为按钮是在我的实际代码中动态创建的。谢谢

var r1cell2=document.getElementById（'r1cell2'）；
var r1c2Button=document.createElement（“按钮”）
r1c2Button.innerHTML=“R1C2”
r1cell2.appendChild（r1c2Button）
设r1=document.getElementById（“r1”）
r1.addEventListener（“单击”，（）=>{
警报（“R1已单击”）
})
r1c2Button.addEventListener（“单击”，（）=>{
警报（“单击R1C2按钮”）
})

电池R1C1
单元格R2C1

可用于包含按钮级别的事件处理

var r1cell2=document.getElementById（'r1cell2'）；
var r1c2Button=document.createElement（“按钮”）
r1c2Button.innerHTML=“R1C2”
r1cell2.appendChild（r1c2Button）
设r1=document.getElementById（“r1”）
r1.addEventListener（“单击”，（）=>{
console.log（“R1单击”）
})
r1c2Button.addEventListener（“单击”，（e）=>{
e、 停止传播（）；
//^^^^^在此处，您可以停止将事件传递给上层事件侦听器
console.log（“单击R1C2按钮”）
})

电池R1C1
单元格R2C1

可用于包含按钮级别的事件处理

var r1cell2=document.getElementById（'r1cell2'）；
var r1c2Button=document.createElement（“按钮”）
r1c2Button.innerHTML=“R1C2”
r1cell2.appendChild（r1c2Button）
设r1=document.getElementById（“r1”）
r1.addEventListener（“单击”，（）=>{
console.log（“R1单击”）
})
r1c2Button.addEventListener（“单击”，（e）=>{
e、 停止传播（）；
//^^^^^在此处，您可以停止将事件传递给上层事件侦听器
console.log（“单击R1C2按钮”）
})

电池R1C1
单元格R2C1

您可以添加stopPropagation，但我建议您适当地进行委派

我通常将事件侦听器添加到最近的静态容器中。这是我做的

var r1cell2=document.getElementById（'r1cell2'）；
var r1c2Button=document.createElement（“按钮”）
r1c2Button.innerHTML=“R1C2”
r1cell2.appendChild（r1c2Button）
document.getElementById（“tableId”）.addEventListener（“单击”，函数（e）{
常数tgt=e.target；
if（tgt.tagName==“按钮”）{
console.log（tgt.textContent，“点击按钮”）
}
否则{
console.log（tgt.closest（“tr”）.id，“单击行”）
}
})

电池R1C1
单元格R2C1

您可以添加stopPropagation，但我建议您适当地进行委派

我通常将事件侦听器添加到最近的静态容器中。这是我做的

var r1cell2=document.getElementById（'r1cell2'）；
var r1c2Button=document.createElement（“按钮”）
r1c2Button.innerHTML=“R1C2”
r1cell2.appendChild（r1c2Button）
document.getElementById（“tableId”）.addEventListener（“单击”，函数（e）{
常数tgt=e.target；
if（tgt.tagName==“按钮”）{
console.log（tgt.textContent，“点击按钮”）
}
否则{
console.log（tgt.closest（“tr”）.id，“单击行”）
}
})

电池R1C1
单元格R2C1

Add to your button click Add to your button click是否可以将eventlistener添加到此处按钮的父/祖/母项中？会是这一排吗？或者是表的父对象？我总是将它添加到最近的静态容器中。我在这里做的那个人。如果要跨多个表或一个div（其中有多个表）执行此操作，它可以是document。请使用两个表和一个容器div进行更新。是否可以将eventlistener添加到此处按钮的父/祖级内容中？会是这一排吗？或者是表的父对象？我总是将它添加到最近的静态容器中。我在这里做的那个人。如果您希望它跨多个表或一个div（其中有多个表）工作，那么它可以是document，并使用两个表和一个container div进行更新