javascript - 隐藏元素背后的逻辑

Question

我在这个特定问题的逻辑上遇到了困境。如果这是一个相当新手的问题，请原谅我，但我宁愿有一个坚实的背景。

网络上有很多这样的示例，您单击一个元素即可显示另一个元素。这种情况可能是一个菜单，当您将鼠标悬停在其上(或单击它)时，它会显示出来。后来，该元素在鼠标移出或单击任何其他元素时被隐藏......那么，这是如何实现的呢？我确信解决方案不是在所有元素上绑定(bind)“hideElem”函数。

问候，

Answer 1

我有一段时间没有这样做了，但一个简单的解决方案是向 DOM 树的顶部添加一个单击事件，该事件将关闭打开的元素。以下是 psuedo-javascript 中的示例:

document.body.onclick = function() { 
   element.style.display = "none";
}

如果您需要在“shown”元素中执行复杂的行为，请确保阻止必要的事件在 DOM 树上传播。

element.onclick = function(e) {
  e.stopPropagation()
}