ReatctJS -普通事件侦听器绑定顺序
ReatctJS -普通事件侦听器绑定顺序
提问于 2018-06-08 09:00:12
我是个新手，正在尝试在任何组件之外实现一些普通的JS侦听器。点击事件不会以任何方式改变页面内容，只会改变下拉菜单的可见性，所以我不认为将它们放在组件中是有意义的。
当我单击profileIcon目录时，下拉列表就会像预期的那样可见。但是，当我单击正文上的任何位置时，下拉菜单就会隐藏起来。即使我试图停止在dropdown侦听器中的传播，也会发生这种情况。
当我添加控制台语句时，我注意到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")中添加的，否则它会失败。
我真的不知道在这里该做什么。有什么想法吗？
解决方案：
我从body监听器中删除了true，并将profileIcon监听器更改为：
document.getElementById("profileIcon").addEventListener("click", (e) => {
e.stopPropagation()
dropdown.style.visibility = "visible"
}, true)回答 1
Stack Overflow用户
发布于 2018-06-08 09:06:43
我注意到body监听器在dropdown监听器之前被调用
因为你是在告诉它。如果true作为第三个参数传递给addEventListener，则处理程序在事件的捕获阶段执行，而不是在冒泡阶段执行。
请参阅What is event bubbling and capturing?
我真的不知道在这里该做什么。有什么想法吗？
不要传递true。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751985
复制相关文章
相似问题
腾讯云开发者
