我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
这种情况的简单解决方案是：
$(document).mouseup(function (e)
{
var container = $("YOUR SELECTOR"); // Give you class or ID
if (!container.is(e.target) && // If the target of the click is not the desired div or section
container.has(e.target).length === 0) // ... nor a descendant-child of the container
{
container.hide();
}
});
如果在div单击事件之外触发，上述脚本将隐藏div。
其他回答
我很惊讶没有人真正承认这一事件：
var button=document.getElementById（'button'）；button.addEventListener（'click'，函数（e）{e.target.style.backgroundColor=“绿色”；});button.addEventListener（'焦点'，函数（e）{e.target.style.backgroundColor=''；});<!DOCTYPE html><html><head><meta charset=“utf-8”></head><body><button id=“button”>单击</button></body></html>
老实说，我不喜欢以前的任何解决方案。
要做到这一点，最好的方法是将“点击”事件绑定到文档，并比较该点击是否真的在元素之外（就像Art在建议中所说的那样）。
然而，您会遇到一些问题：您永远无法解除绑定，并且无法使用外部按钮打开/关闭该元素。
这就是为什么我编写了这个小插件（点击此处链接），以简化这些任务。能简单一点吗？
<a id='theButton' href="#">Toggle the menu</a><br/>
<div id='theMenu'>
I should be toggled when the above menu is clicked,
and hidden when user clicks outside.
</div>
<script>
$('#theButton').click(function(){
$('#theMenu').slideDown();
});
$("#theMenu").dClickOutside({ ignoreList: $("#theButton") }, function(clickedObj){
$(this).slideUp();
});
</script>
您可以监听文档上的单击事件，然后使用.clost（）确保#menucontainer不是被单击元素的祖先或目标。
如果不是，则单击的元素位于#menucontainer之外，您可以安全地隐藏它。
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.closest('#menucontainer').length &&
$('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
});
编辑–2017-06-23
如果您计划关闭菜单并希望停止侦听事件，也可以在事件侦听器之后进行清理。此函数将只清理新创建的侦听器，保留文档上的任何其他单击侦听器。使用ES2015语法：
export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
const $target = $(event.target);
if (!$target.closest(selector).length && $(selector).is(':visible')) {
$(selector).hide();
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener);
}
document.addEventListener('click', outsideClickListener);
}
编辑–2018-03-11
对于那些不想使用jQuery的人。这是上面的纯vanillaJS（ECMAScript6）代码。
function hideOnClickOutside(element) {
const outsideClickListener = event => {
if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
element.style.display = 'none';
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener);
}
document.addEventListener('click', outsideClickListener);
}
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
注：这是基于Alex的评论，仅供使用！元素。包含（event.target）而不是jQuery部分。
但是element.clost（）现在也可以在所有主要浏览器中使用（W3C版本与jQuery版本稍有不同）。Polyfills可以在以下位置找到：Element.clost（）
编辑–2020-05-21
如果您希望用户能够在元素内部单击并拖动，则在元素外部释放鼠标，而不关闭元素：
...
let lastMouseDownX = 0;
let lastMouseDownY = 0;
let lastMouseDownWasOutside = false;
const mouseDownListener = (event: MouseEvent) => {
lastMouseDownX = event.offsetX;
lastMouseDownY = event.offsetY;
lastMouseDownWasOutside = !$(event.target).closest(element).length;
}
document.addEventListener('mousedown', mouseDownListener);
在外部ClickListener中：
const outsideClickListener = event => {
const deltaX = event.offsetX - lastMouseDownX;
const deltaY = event.offsetY - lastMouseDownY;
const distSq = (deltaX * deltaX) + (deltaY * deltaY);
const isDrag = distSq > 3;
const isDragException = isDrag && !lastMouseDownWasOutside;
if (!element.contains(event.target) && isVisible(element) && !isDragException) { // or use: event.target.closest(selector) === null
element.style.display = 'none';
removeClickListener();
document.removeEventListener('mousedown', mouseDownListener); // Or add this line to removeClickListener()
}
}
$("body > div:not(#dvid)").click(function (e) {
//your code
});
如果您正在为IE和FF 3.*编写脚本，并且您只想知道单击是否发生在某个框区域内，您也可以使用以下内容：
this.outsideElementClick=函数（objEvent，objElement）{var objCurrentElement=objEvent.target | | objEvent.srcElement；var blnSideX=false；var blnSideY=false；如果（objCurrentElement.getBoundingClientRect（）.left>=objElement.getBoundingClientRect（）.left&&objCurrentElement.getBoundingClientRectblnSideX=真；如果（objCurrentElement.getBoundingClientRect（）.top>=objElement.getBoundingClientRect（）.ttop&&objCurrentElement.getBoundingClientRectblnSideY=真；如果（blnSideX&&blnSideY）return false；其他的返回true；}
