我有一些HTML菜单,当用户单击这些菜单的标题时,它们会完整显示。 当用户在菜单区域之外单击时,我想隐藏这些元素。
jQuery可能会发生这种情况吗?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
#1楼
将单击事件侦听器挂在文档上。 在事件侦听器内部,您可以查看事件对象 ,特别是event.target,以查看单击了哪个元素:
$(document).click(function(e){
if ($(e.target).closest("#menuscontainer").length == 0) {
// .closest can help you determine if the element
// or one of its ancestors is #menuscontainer
console.log("hide");
}
});
#2楼
这完全适合我!
$('html').click(function (e) {
if (e.target.id == 'YOUR-DIV-ID') {
//do something
} else {
//do something
}
});
#3楼
这里的其他解决方案对我不起作用,因此我不得不使用:
if(!$(event.target).is('#foo'))
{
// hide menu
}
#4楼
如果您正在为IE和FF 3. *编写脚本,并且只想知道单击是否发生在某个框区域内,则还可以使用类似以下内容的方法:
this.outsideElementClick = function(objEvent, objElement){
var objCurrentElement = objEvent.target || objEvent.srcElement;
var blnInsideX = false;
var blnInsideY = false;
if (objCurrentElement.getBoundingClientRect().left >= objElement.getBoundingClientRect().left && objCurrentElement.getBoundingClientRect().right <= objElement.getBoundingClientRect().right)
blnInsideX = true;
if (objCurrentElement.getBoundingClientRect().top >= objElement.getBoundingClientRect().top && objCurrentElement.getBoundingClientRect().bottom <= objElement.getBoundingClientRect().bottom)
blnInsideY = true;
if (blnInsideX && blnInsideY)
return false;
else
return true;}
#5楼
检查窗口单击事件目标(只要没有在其他任何地方捕获,它应该传播到窗口),并确保它不是任何菜单元素。 如果不是,那么您就在菜单之外。
或检查单击的位置,然后查看它是否包含在菜单区域中。
#6楼
注意:应该避免使用
stopEventPropagation()
,因为它会破坏DOM中的正常事件流。 有关更多信息,请参见本文 。 考虑改用此方法
将单击事件附加到关闭窗口的文档主体。 将单独的click事件附加到容器,以停止传播到文档主体。
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
#7楼
我有一个类似于Eran的示例的应用程序,除了在打开菜单时将click事件附加到主体上。
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
有关jQuery的one()
函数的更多信息
#8楼
与其使用流程中断,模糊/聚焦事件或任何其他棘手的技术,只需将事件流程与元素的亲属关系相匹配:
$(document).on("click.menu-outside", function(event){
// Test if target and it's parent aren't #menuscontainer
// That means the click event occur on other branch of document tree
if(!$(event.target).parents().andSelf().is("#menuscontainer")){
// Click outisde #menuscontainer
// Hide the menus (but test if menus aren't already hidden)
}
});
要删除外部点击事件监听器,只需:
$(document).off("click.menu-outside");
#9楼
$("#menuscontainer").click(function() {
$(this).focus();
});
$("#menuscontainer").blur(function(){
$(this).hide();
});
对我有用。
#10楼
作为变体:
var $menu = $('#menucontainer');
$(document).on('click', function (e) {
// If element is opened and click target is outside it, hide it
if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
$menu.hide();
}
});
停止事件传播没有问题,并且更好地支持同一页面上的多个菜单,在第一个菜单处于打开状态时单击第二个菜单将使stopPropagation解决方案中的第一个菜单保持打开状态。
#11楼
将clickoutside处理程序(WLOG)绑定到元素时,将发生以下情况:
- 将该元素添加到一个数组,该数组包含带有clickoutside处理程序的所有元素
- ( 命名空间的 ) 单击处理程序已绑定到文档(如果尚未存在)
- 在文档中的任何单击上, 都会为该数组中与click -events目标不相等或为父的那些元素触发clickoutside事件
- 此外, clickoutside事件的event.target设置为用户单击的元素(因此,您甚至知道用户单击了什么,而不仅仅是他在外部单击了)
因此,不会停止任何事件的传播,并且可以使用外部处理程序在元素“上方”使用其他单击处理程序。
#12楼
解决方案1
与其使用event.stopPropagation()可能会有一些副作用,不如定义一个简单的标志变量并添加一个if
条件。 我对此进行了测试,并且正常工作,没有stopPropagation的任何副作用:
var flag = "1";
$('#menucontainer').click(function(event){
flag = "0"; // flag 0 means click happened in the area where we should not do any action
});
$('html').click(function() {
if(flag != "0"){
// Hide the menus if visible
}
else {
flag = "1";
}
});
解决方案2
只要一个简单的if
条件:
$(document).on('click', function(event){
var container = $("#menucontainer");
if (!container.is(event.target) && // If the target of the click isn't the container...
container.has(event.target).length === 0) // ... nor a descendant of the container
{
// Do whatever you want to do when click is outside the element
}
});
#13楼
您可以侦听document
上的click事件,然后使用.closest()
来确保#menucontainer
不是其祖先,也不是clicked元素的目标。
如果不是,则单击的元素在#menucontainer
外部,您可以安全地隐藏它。
$(document).click(function(event) {
$target = $(event.target);
if(!$target.closest('#menucontainer').length &&
$('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
});
编辑– 2017-06-23
如果您打算关闭菜单并想停止监听事件,则还可以在事件监听器之后进行清理。 此功能将仅清除新创建的侦听器,并保留document
上的所有其他单击侦听器。 使用ES2015语法:
export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
$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的人。 这是上面的纯香草代码(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注释,仅使用!element.contains(event.target)
而不是jQuery部分。
但是element.closest()
现在在所有主流浏览器中都可用(W3C版本与jQuery版本略有不同)。 可以在这里找到Polyfills: Element.closest()
#14楼
这是面向未来观众的原始JavaScript解决方案。
单击文档中的任何元素时,如果切换了单击的元素的ID,或者未隐藏隐藏的元素,并且隐藏的元素不包含单击的元素,请切换该元素。
(function () {
"use strict";
var hidden = document.getElementById('hidden');
document.addEventListener('click', function (e) {
if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
}, false);
})();
(function () { "use strict"; var hidden = document.getElementById('hidden'); document.addEventListener('click', function (e) { if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none'; }, false); })();
<a href="javascript:void(0)" id="toggle">Toggle Hidden Div</a> <div id="hidden" style="display: none;">This content is normally hidden. click anywhere other than this content to make me disappear</div>
如果您将在同一页面上进行多个切换,则可以使用以下方法:
- 将
hidden
的类名添加到可折叠项中。 - 单击文档后,关闭所有不包含被单击元素并且未被隐藏的隐藏元素
- 如果单击的元素是切换按钮,则切换指定的元素。
(function () { "use strict"; var hiddenItems = document.getElementsByClassName('hidden'), hidden; document.addEventListener('click', function (e) { for (var i = 0; hidden = hiddenItems[i]; i++) { if (!hidden.contains(e.target) && hidden.style.display != 'none') hidden.style.display = 'none'; } if (e.target.getAttribute('data-toggle')) { var toggle = document.querySelector(e.target.getAttribute('data-toggle')); toggle.style.display = toggle.style.display == 'none' ? 'block' : 'none'; } }, false); })();
<a href="javascript:void(0)" data-toggle="#hidden1">Toggle Hidden Div</a> <div class="hidden" id="hidden1" style="display: none;" data-hidden="true">This content is normally hidden</div> <a href="javascript:void(0)" data-toggle="#hidden2">Toggle Hidden Div</a> <div class="hidden" id="hidden2" style="display: none;" data-hidden="true">This content is normally hidden</div> <a href="javascript:void(0)" data-toggle="#hidden3">Toggle Hidden Div</a> <div class="hidden" id="hidden3" style="display: none;" data-hidden="true">This content is normally hidden</div>
#15楼
支持最受欢迎的答案,但请添加
&& (e.target != $('html').get(0)) // ignore the scrollbar
因此,单击滚动条不会[隐藏或隐藏]您的目标元素。
#16楼
经过研究,我找到了三种可行的解决方案(我忘记了页面链接以供参考)
第一个解决方案
<script>
//The good thing about this solution is it doesn't stop event propagation.
var clickFlag = 0;
$('body').on('click', function () {
if(clickFlag == 0) {
console.log('hide element here');
/* Hide element here */
}
else {
clickFlag=0;
}
});
$('body').on('click','#testDiv', function (event) {
clickFlag = 1;
console.log('showed the element');
/* Show the element */
});
</script>
第二解决方案
<script>
$('body').on('click', function(e) {
if($(e.target).closest('#testDiv').length == 0) {
/* Hide dropdown here */
}
});
</script>
第三种解决方案
<script>
var specifiedElement = document.getElementById('testDiv');
document.addEventListener('click', function(event) {
var isClickInside = specifiedElement.contains(event.target);
if (isClickInside) {
console.log('You clicked inside')
}
else {
console.log('You clicked outside')
}
});
</script>
#17楼
一个简单的解决方案是:
$(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
click事件之外,则上述脚本将隐藏div
。
您可以查看以下博客以获取更多信息: http : //www.codecanal.com/detect-click-outside-div-using-javascript/
#18楼
为了更易于使用和更具表现力的代码,我为此创建了一个jQuery插件:
$('div.my-element').clickOut(function(target) {
//do something here...
});
注意: target是用户实际单击的元素。 但是回调仍然在原始元素的上下文中执行,因此您可以按照预期在jQuery回调中利用它 。
插入:
$.fn.clickOut = function (parent, fn) {
var context = this;
fn = (typeof parent === 'function') ? parent : fn;
parent = (parent instanceof jQuery) ? parent : $(document);
context.each(function () {
var that = this;
parent.on('click', function (e) {
var clicked = $(e.target);
if (!clicked.is(that) && !clicked.parents().is(that)) {
if (typeof fn === 'function') {
fn.call(that, clicked);
}
}
});
});
return context;
};
默认情况下,单击事件侦听器放置在文档上。 但是,如果您想限制事件侦听器的范围,则可以传入一个jQuery对象,该对象表示一个父级元素,该元素将是监听点击的顶级父级。 这样可以防止不必要的文档级事件侦听器。 显然,除非提供的父元素是初始元素的父元素,否则它将无法工作。
像这样使用:
$('div.my-element').clickOut($('div.my-parent'), function(target) {
//do something here...
});
#19楼
如何检测元素外部的点击?
这个问题之所以如此流行并且答案如此之多,是因为它看似复杂。 经过将近八年的时间和数十个答案,我真的很惊讶地看到对可访问性的关注很少。
当用户在菜单区域之外单击时,我想隐藏这些元素。
这是一个崇高的原因,是实际的问题。 问题的标题(即大多数答案似乎试图解决的问题)包含不幸的鲱鱼。
提示:这是“点击”一词!
您实际上并不想绑定点击处理程序。
如果要绑定单击处理程序以关闭对话框,则您已经失败了。 您失败的原因是,并非所有人都触发click
事件。 不使用鼠标的用户将可以通过按Tab来退出对话框(并且弹出菜单可以说是对话框的一种),然后他们将无法在不随后触发click
情况下读取对话框后面的内容。事件。
因此,让我们改一下这个问题。
用户完成操作后如何关闭对话框?
这是目标。 不幸的是,现在我们需要用userisfinishedwiththedialog
事件绑定userisfinishedwiththedialog
,而这种绑定并不是那么简单。
那么我们如何才能检测到用户已完成使用对话框?
focusout
事件
一个很好的开始是确定焦点是否已离开对话框。
提示:请注意blur
事件,如果事件绑定到冒泡阶段, blur
不会传播!
jQuery的focusout
将很好。 如果不能使用jQuery,则可以在捕获阶段使用blur
:
element.addEventListener('blur', ..., true);
// use capture: ^^^^
同样,对于许多对话框,您将需要允许容器获得焦点。 添加tabindex="-1"
以允许对话框动态接收焦点,而不会中断制表流程。
$('a').on('click', function () { $(this.hash).toggleClass('active').focus(); }); $('div').on('focusout', function () { $(this).removeClass('active'); });
div { display: none; } .active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#example">Example</a> <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor</a> sit amet. </div>
如果您在演示中玩了超过一分钟,则应该很快开始发现问题。
首先是对话框中的链接不可单击。 尝试单击它或它的选项卡将导致对话框在发生交互之前关闭。 这是因为聚焦内部元素会在再次触发focusout
事件之前触发focusin
事件。
解决方法是在状态循环上排队状态更改。 对于不支持setImmediate
浏览器,可以使用setImmediate(...)
或setTimeout(..., 0)
来setImmediate
。 一旦排队,就可以通过随后的focusin
取消:
$('.submenu').on({
focusout: function (e) {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function (e) {
clearTimeout($(this).data('submenuTimer'));
}
});
$('a').on('click', function () { $(this.hash).toggleClass('active').focus(); }); $('div').on({ focusout: function () { $(this).data('timer', setTimeout(function () { $(this).removeClass('active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this).data('timer')); } });
div { display: none; } .active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#example">Example</a> <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor</a> sit amet. </div>
第二个问题是当再次按下链接时,对话框不会关闭。 这是因为对话框失去焦点,触发关闭行为,此后单击链接便触发对话框重新打开。
与上一期类似,需要管理焦点状态。 鉴于状态更改已经排队,只需在对话框触发器上处理焦点事件即可:
这看起来应该很熟悉 $('a').on({ focusout: function () { $(this.hash).data('timer', setTimeout(function () { $(this.hash).removeClass('active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this.hash).data('timer')); } });
$('a').on('click', function () { $(this.hash).toggleClass('active').focus(); }); $('div').on({ focusout: function () { $(this).data('timer', setTimeout(function () { $(this).removeClass('active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this).data('timer')); } }); $('a').on({ focusout: function () { $(this.hash).data('timer', setTimeout(function () { $(this.hash).removeClass('active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this.hash).data('timer')); } });
div { display: none; } .active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#example">Example</a> <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor</a> sit amet. </div>
Esc键
如果您认为已经通过处理焦点状态完成了操作,则可以做更多的事情来简化用户体验。
这通常是“很不错的”功能,但是通常当您使用任何形式的模式或弹出窗口时, Esc键会将其关闭。
keydown: function (e) { if (e.which === 27) { $(this).removeClass('active'); e.preventDefault(); } }
$('a').on('click', function () { $(this.hash).toggleClass('active').focus(); }); $('div').on({ focusout: function () { $(this).data('timer', setTimeout(function () { $(this).removeClass('active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this).data('timer')); }, keydown: function (e) { if (e.which === 27) { $(this).removeClass('active'); e.preventDefault(); } } }); $('a').on({ focusout: function () { $(this.hash).data('timer', setTimeout(function () { $(this.hash).removeClass('active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this.hash).data('timer')); } });
div { display: none; } .active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#example">Example</a> <div id="example" tabindex="-1"> Lorem ipsum <a href="http://example.com">dolor</a> sit amet. </div>
如果知道对话框中有可聚焦的元素,则无需直接聚焦对话框。 如果要构建菜单,则可以将焦点放在第一个菜单项上。
click: function (e) { $(this.hash) .toggleClass('submenu--active') .find('a:first') .focus(); e.preventDefault(); }
$('.menu__link').on({ click: function (e) { $(this.hash) .toggleClass('submenu--active') .find('a:first') .focus(); e.preventDefault(); }, focusout: function () { $(this.hash).data('submenuTimer', setTimeout(function () { $(this.hash).removeClass('submenu--active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this.hash).data('submenuTimer')); } }); $('.submenu').on({ focusout: function () { $(this).data('submenuTimer', setTimeout(function () { $(this).removeClass('submenu--active'); }.bind(this), 0)); }, focusin: function () { clearTimeout($(this).data('submenuTimer')); }, keydown: function (e) { if (e.which === 27) { $(this).removeClass('submenu--active'); e.preventDefault(); } } });
.menu { list-style: none; margin: 0; padding: 0; } .menu:after { clear: both; content: ''; display: table; } .menu__item { float: left; position: relative; } .menu__link { background-color: lightblue; color: black; display: block; padding: 0.5em 1em; text-decoration: none; } .menu__link:hover, .menu__link:focus { background-color: black; color: lightblue; } .submenu { border: 1px solid black; display: none; left: 0; list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; } .submenu--active { display: block; } .submenu__item { width: 150px; } .submenu__link { background-color: lightblue; color: black; display: block; padding: 0.5em 1em; text-decoration: none; } .submenu__link:hover, .submenu__link:focus { background-color: black; color: lightblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li class="menu__item"> <a class="menu__link" href="#menu-1">Menu 1</a> <ul class="submenu" id="menu-1" tabindex="-1"> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li> </ul> </li> <li class="menu__item"> <a class="menu__link" href="#menu-2">Menu 2</a> <ul class="submenu" id="menu-2" tabindex="-1"> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li> <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li> </ul> </li> </ul> lorem ipsum <a href="http://example.com/">dolor</a> sit amet.
WAI-ARIA角色和其他辅助功能支持
该答案有望涵盖此功能可访问的键盘和鼠标支持的基础知识,但是由于它已经相当大了,我将避免讨论WAI-ARIA角色和属性 ,但是我强烈建议实现者参考规范以了解详细信息。他们应该使用什么角色以及任何其他适当的属性。
#20楼
我在以下方面取得了成功:
var $menuscontainer = ...;
$('#trigger').click(function() {
$menuscontainer.show();
$('body').click(function(event) {
var $target = $(event.target);
if ($target.parents('#menuscontainer').length == 0) {
$menuscontainer.hide();
}
});
});
的逻辑是:当#menuscontainer
所示,绑定一个单击处理程序到主体隐藏#menuscontainer
仅当(的点击)目标不是它的一个子。
#21楼
事件具有元素的名为event.path的属性,该属性是“所有祖先的静态有序列表(按树顺序)” 。 要检查事件是否起源于特定的DOM元素或其子元素之一,只需检查该特定DOM元素的路径即可。 通过在some
函数中对元素进行逻辑OR
它也可以用于检查多个元素。
$("body").click(function() { target = document.getElementById("main"); flag = event.path.some(function(el, i, arr) { return (el == target) }) if (flag) { console.log("Inside") } else { console.log("Outside") } });
#main { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <ul> <li>Test-Main</li> <li>Test-Main</li> <li>Test-Main</li> <li>Test-Main</li> <li>Test-Main</li> </ul> </div> <div id="main2"> Outside Main </div>
所以对于你的情况应该是
$("body").click(function() {
target = $("#menuscontainer")[0];
flag = event.path.some(function(el, i, arr) {
return (el == target)
});
if (!flag) {
// Hide the menus
}
});
#22楼
如果有人好奇这里是javascript解决方案(es6):
window.addEventListener('mouseup', e => {
if (e.target != yourDiv && e.target.parentNode != yourDiv) {
yourDiv.classList.remove('show-menu');
//or yourDiv.style.display = 'none';
}
})
和es5,以防万一:
window.addEventListener('mouseup', function (e) {
if (e.target != yourDiv && e.target.parentNode != yourDiv) {
yourDiv.classList.remove('show-menu');
//or yourDiv.style.display = 'none';
}
});
#23楼
采用:
var go = false;
$(document).click(function(){
if(go){
$('#divID').hide();
go = false;
}
})
$("#divID").mouseover(function(){
go = false;
});
$("#divID").mouseout(function (){
go = true;
});
$("btnID").click( function(){
if($("#divID:visible").length==1)
$("#divID").hide(); // Toggle
$("#divID").show();
});
#24楼
这是纯JavaScript的简单解决方案。 ES6是最新的 :
var isMenuClick = false;
var menu = document.getElementById('menuscontainer');
document.addEventListener('click',()=>{
if(!isMenuClick){
//Hide the menu here
}
//Reset isMenuClick
isMenuClick = false;
})
menu.addEventListener('click',()=>{
isMenuClick = true;
})
#25楼
我已经使用下面的脚本并完成了jQuery。
jQuery(document).click(function(e) {
var target = e.target; //target div recorded
if (!jQuery(target).is('#tobehide') ) {
jQuery(this).fadeOut(); //if the click element is not the above id will hide
}
})
在下面找到HTML代码
<div class="main-container">
<div> Hello I am the title</div>
<div class="tobehide">I will hide when you click outside of me</div>
</div>
您可以在这里阅读教程
#26楼
令我惊讶的是,实际上没有人承认focusout
事件:
var button = document.getElementById('button'); button.addEventListener('click', function(e){ e.target.style.backgroundColor = 'green'; }); button.addEventListener('focusout', function(e){ e.target.style.backgroundColor = ''; });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button id="button">Click</button> </body> </html>
#27楼
我不认为您真正需要的是在用户单击外部时关闭菜单。 您需要的是,当用户单击页面上的任意位置时,菜单关闭。 如果单击菜单,或者关闭菜单,它应该关闭吗?
上面找不到满意的答案,促使我前几天写了这篇博客 。 对于更加学究的人来说,有许多陷阱需要注意:
- 如果在单击时将click事件处理程序附加到body元素,请确保在关闭菜单并取消绑定事件之前等待第二次单击。 否则,打开菜单的click事件将冒泡到必须关闭菜单的侦听器中。
- 如果在click事件上使用event.stopPropogation(),则页面中的其他任何元素都不能具有“单击任何位置关闭”功能。
- 将click事件处理程序无限期地附加到body元素上并不是一种有效的解决方案
- 比较事件的目标以及事件的父对象与处理程序的创建者的比较,您假设您想要的是在单击菜单时关闭菜单,而您真正想要的是在单击页面上的任意位置时关闭菜单。
- 在body元素上侦听事件将使您的代码更加脆弱。 像这样无辜的样式会破坏它:
body { margin-left:auto; margin-right: auto; width:960px;}
body { margin-left:auto; margin-right: auto; width:960px;}
#28楼
我在某些jQuery日历插件中找到了此方法。
function ClickOutsideCheck(e)
{
var el = e.target;
var popup = $('.popup:visible')[0];
if (popup==undefined)
return true;
while (true){
if (el == popup ) {
return true;
} else if (el == document) {
$(".popup").hide();
return false;
} else {
el = $(el).parent()[0];
}
}
};
$(document).bind('mousedown.popup', ClickOutsideCheck);
#29楼
$(document).click(function() {
$(".overlay-window").hide();
});
$(".overlay-window").click(function() {
return false;
});
如果单击文档,则隐藏给定元素,除非您单击相同的元素。
#30楼
我在YUI 3中做到了这一点:
// Detect the click anywhere other than the overlay element to close it.
Y.one(document).on('click', function (e) {
if (e.target.ancestor('#overlay') === null && e.target.get('id') != 'show' && overlay.get('visible') == true) {
overlay.hide();
}
});
我正在检查祖先是否不是小部件元素容器,
如果目标不是打开小部件/元素的位置,
如果我要关闭的小部件/元素已经打开(不是那么重要)。
#31楼
正如另一位张贴者所说的那样,有很多陷阱,特别是如果要显示的元素(在本例中为菜单)具有交互式元素。 我发现以下方法相当可靠:
$('#menuscontainer').click(function(event) {
//your code that shows the menus fully
//now set up an event listener so that clicking anywhere outside will close the menu
$('html').click(function(event) {
//check up the tree of the click target to check whether user has clicked outside of menu
if ($(event.target).parents('#menuscontainer').length==0) {
// your code to hide menu
//this event listener has done its job so we can unbind it.
$(this).unbind(event);
}
})
});