[英]Detect click outside element?
与此问题类似,但更进一步。 我想检测一组项目之外的点击,我按以下方式处理:
$('#menu div').live('click', function() {
// Close other open menu items, if any.
// Toggle the clicked menu item.
$('body').one('click', function(event) {
// Hide the menu item.
event.stopPropagation();
});
});
不幸的是,当另一个菜单项打开而另一个菜单项被点击时,这就像一个魅力,它需要两次点击才能打开第二个项目。 第一次单击隐藏第一个打开的菜单项,第二个单击显示第二个菜单项。
“正确”行为以下列方式起作用:
我尝试了以下代替上面的$('body').one()
命令忽略菜单项的点击而收效甚微:
// Captures click on menu items in spite of the not.
$('*').not('#menu *').one('click', function() { // Hide menu }
$('*:not(#menu)').one('click', function() { // Hide menu }
一如既往,感谢您的帮助!
只需将身体点击处理程序移到外面并执行以下操作:
$('body').bind('click', function(e) {
if($(e.target).closest('#menu').length == 0) {
// click happened outside of menu, hide any visible menu items
}
});
在评论中错误地指出e.target在IE中不起作用; 这不是真的,因为jQuery的Event对象在必要时修复了这些不一致(IE,Safari)。
我很久以前写过这篇文章,在jQuery的辉煌岁月之前......
function clickedOutsideElement(elemId) {
var theElem = getEventTarget(window.event);
while(theElem != null) {
if(theElem.id == elemId)
return false;
theElem = theElem.offsetParent;
}
return true;
}
function getEventTarget(evt) {
var targ = (evt.target) ? evt.target : evt.srcElement;
if(targ != null) {
if(targ.nodeType == 3)
targ = targ.parentNode;
}
return targ;
}
document.onclick = function() {
if(clickedOutsideElement('divTest'))
alert('Outside the element!');
else
alert('Inside the element!');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.