我对这个特定问题的逻辑进退两难。如果这是一个新手问题，请原谅我，但我宁愿有一个坚实的背景。
网络上有很多这样的例子，你点击一个元素来显示另一个元素。这种情况可能是一个菜单，当您将鼠标悬停在它上面（或单击它）时，它就会显示出来。后来，该元素在鼠标移出或单击任何其他元素时被隐藏。那么，这是如何实现的？我确信解决方案不是在所有元素上绑定“hideElem”函数。
问候，
【问题讨论】：
标签： javascript jquery dom
我已经有一段时间没有这样做了，但是一个简单的解决方案是在 DOM 树的顶部添加一个单击事件，该事件将关闭打开的元素。这是伪javascript中的一个示例：
document.body.onclick = function() {
element.style.display = "none";
}
如果您需要在“显示”元素中进行复杂的行为，请确保阻止必要的事件在 DOM 树上传播。
element.onclick = function(e) {
e.stopPropagation()
}
【讨论】：
一般来说，逻辑是相反的（至少对于菜单而言），即相关元素是隐藏的，直到状态事件取消隐藏它，然后按照指示再次隐藏。关键是隐藏/取消隐藏逻辑通常与元素本身相关联，而不是页面上的所有其他内容。
至于它是如何完成的，方法各不相同。有很多 Javascript 解决方案，大部分与已经概述的那些相同，但菜单也可以纯粹使用 CSS 来完成 - 通常使用 display: none; 属性，但您也可以执行设置等操作/取消设置负边距，以便元素“在页面上和页面上”移动。
以我自己的一些作品为例：
【讨论】：
$('#target').bind('click', function(event)
{
var $element = $('#element');
$element.show();
$(document).one('click', function()
{
$element.hide();
});
// If you don't stop the event, it will bubble up to the document
// and trigger the click event we just bound.
// This will hide the element right now just after showing it,
// we don't want that.
event.stopPropagation();
}
您必须记住，Javascript 事件在开始触发时会在整个树中上下移动。因此，当您想要侦听许多元素上的事件时，您可以将事件侦听器绑定到任何父级。
这称为事件委托。
【讨论】：
一种廉价的方法可能是将事件处理程序绑定到可点击项目和/或其目标的“(on)blur”事件。如果您的设计允许。
【讨论】：
这是一种方法。
您还可以编写一个方法来捕获（挂钩）所有“点击”事件，而不考虑元素，并从那里隐藏您的菜单。
JQuery 会让您更轻松地完成这项任务。
【讨论】：
第 1 步 - 使用 javascript 库，这样您就可以让代码尽可能跨浏览器 - 否则您必须迎合 Internet Explorer 和基于 Gecko/webkit 的浏览器之间的两种不同事件模型。 JQuery、Mootools、YUI - 所有这些都会为您处理 - 还有更多，但那 3 个是我最喜欢的，并且有据可查。
第 2 步 - 您可能希望为此实现 clickshield - 本质上是一个块级 dom 元素，它绝对定位在整个页面上，具有比页面其余部分更高的 z-index。附加一个点击事件，你可以执行你的逻辑来隐藏页面上的元素。 clickshield 可以很容易地让 javascript 代码使用上述任何 javascript 库的方法将其扩展为页面后 DOM 渲染的宽度 - 高度。
【讨论】：