首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ReatctJS -普通事件侦听器绑定顺序

ReatctJS -普通事件侦听器绑定顺序
EN

Stack Overflow用户
提问于 2018-06-08 09:00:12
回答 1查看 225关注 0票数 -1

我是个新手,正在尝试在任何组件之外实现一些普通的JS侦听器。点击事件不会以任何方式改变页面内容,只会改变下拉菜单的可见性,所以我不认为将它们放在组件中是有意义的。

当我单击profileIcon目录时,下拉列表就会像预期的那样可见。但是,当我单击正文上的任何位置时,下拉菜单就会隐藏起来。即使我试图停止在dropdown侦听器中的传播,也会发生这种情况。

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

代码语言:javascript
复制
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监听器更改为:

代码语言:javascript
复制
document.getElementById("profileIcon").addEventListener("click", (e) => {
    e.stopPropagation()
    dropdown.style.visibility = "visible"
}, true)
EN

回答 1

Stack Overflow用户

发布于 2018-06-08 09:06:43

我注意到body监听器在dropdown监听器之前被调用

因为你是在告诉它。如果true作为第三个参数传递给addEventListener,则处理程序在事件的捕获阶段执行,而不是在冒泡阶段执行。

请参阅What is event bubbling and capturing?

我真的不知道在这里该做什么。有什么想法吗?

不要传递true

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50751985

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档