Javascript 将事件添加到父div以停止事件冒泡

我想听听你的意见

我想停止向父级冒泡的事件（停止默认的单击事件）。我有3个内部div，它们有自己的onclick功能和一个包装器div。我想停止每个内部div的事件传播。以下是三种可能的解决方案

选项1：为每个单独的子元素（代码重复）添加

event.stopPropagation（）

选项2：在这种情况下，将

event.stopPropagation（）

添加到包装器div（

subParent

）中（包装器div上没有代码重复ut额外事件）

选项3：添加一个函数，该函数将执行

event.stopPropagation

并在每个子单击处理程序中调用（减少了函数调用的代码重复）

我认为选项2中有一个优势，因为我们避免了代码重复。选项3也会这样做，但我们仍然需要在每个子单击处理程序中调用该函数

问题1：选项2是否有任何缺点，因为我们添加单击事件只是为了停止传播？

问题2：选项2还有其他缺点吗？

document.querySelector（'#parent'）.addEventListener（'click'，e=>{
console.log（'Parent'）；
});
document.querySelector（“#child1”）.addEventListener（'click'，e=>{
e、 stopPropagation（）；//选项1
//为孩子1执行一些操作
如果（e.target.style.border）e.target.style.border=''
else e.target.style.border='1px solid'
})
document.querySelector（“#child2”）.addEventListener（'click'，e=>{
e、 stopPropagation（）；//选项1
//为儿童2执行一些操作
如果（e.target.style.border）e.target.style.border=''
else e.target.style.border='1px solid'
})
document.querySelector（“#child3”）.addEventListener（'click'，e=>{
e、 stopPropagation（）；//选项1
//为儿童3执行一些操作
如果（e.target.style.border）e.target.style.border=''
else e.target.style.border='1px solid'
})
//选择2
/*document.querySelector（“#subParent”）.addEventListener（'click'，e=>{
e、 停止传播（）；
}) */
//选择3
功能停止播放（e）{
e、 停止传播（）；
}
document.querySelector（“#child4”）.addEventListener（'click'，e=>{
停止播放（e）//选项3
//为儿童4执行一些操作
如果（e.target.style.border）e.target.style.border=''
else e.target.style.border='1px solid'
})

孩子1
孩子2
孩子3
孩子4