普通事件侦听器绑定顺序

profileIcon div,下拉列表将按预期显示。但是,当我点击身体上的任何地方时,下拉列表就会隐藏起来。即使我试图阻止病毒的传播,这种情况也会发生 dropdown

当我添加console语句时,我注意到body listener在dropdown listener之前被调用,基本上不管我做什么(例如,添加顺序、调用各种超时函数、将body listener更改为 document.getElementById("root") 等等)。

document.getElementById("profileIcon").addEventListener("click", (e) => {
    document.getElementById("dropdown").style.visibility = "visible"        
})

document.getElementById("dropdown").addEventListener("click", (e) => {
    console.log("dropdown")
    e.stopPropagation()
    e.preventDefault()
    e.stopImmediatePropagation()
})

document.body.addEventListener('click', function() {
    console.log("body")
    document.getElementById("dropdown").style.visibility = "hidden"
}, true)

document.addEventListener("DOMContentLoaded")

我真的不知道该怎么办。有什么想法吗?

解决方案:

我搬走了 true 侦听器:

document.getElementById("profileIcon").addEventListener("click", (e) => {
    e.stopPropagation()
    dropdown.style.visibility = "visible"
}, true)