ReatctJS - Plain vanilla事件侦听器绑定顺序

Question

我是React的新手，并尝试在任何组件之外实现一些简单的vanilla侦听器。点击事件不会以任何方式更改页面内容，只会更改下拉菜单的可见性，因此我认为将它们放在组件中是没有意义的。

当我点击profileIcon div时，下拉列表会按预期显示。但是，当我单击身体上的任何位置时，将隐藏下拉列表。即使我试图阻止dropdown监听器中的传播，也会发生这种情况。

当我添加控制台语句时，我注意到在下拉监听器之前调用了主体监听器，基本上无论我做什么（例如，添加顺序，调用各种超时函数，将正文监听器更改为{{1}等等。）。

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) 内，否则就会失败。

我真的不知道该怎么做。有什么想法吗？

SOLUTION：

我从正文监听器中删除了document.addEventListener("DOMContentLoaded")，并将true监听器更改为：

profileIcon

Answer 1

  

我注意到在下拉侦听器之前调用了body侦听器

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

请参阅What is event bubbling and capturing?

  

我真的不知道该怎么做。有什么想法吗？

不要通过true。