javascript JQuery：点击除某些元素之外的所有地方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5358280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: click everywhere but some element
提问by ink
I have some elements which i can select with .click() function and they became highlighted. There is menu above them with some actions. I want to cancel highlight when I click any element but not menu.
我有一些可以使用 .click() 函数选择的元素，它们会突出显示。它们上方有菜单，其中包含一些操作。当我单击任何元素而不是菜单时，我想取消突出显示。
Structure:
结构：
<body>
<div id="menu">
</div>
<div id="elements">
/* selectable elements here */
</div>
</body>
Executable Example
可执行示例
$().ready(function(){
$("#elements a").click(function(){
$(this).css('color', 'red');
return false;
});
$(document).click(function(e) {
if ( $(e.target).closest('#menu').length === 0 ) {
$("#elements a").css('color', 'blue');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
<div id="elements">
<a href="#">Element 1</a>
<a href="#">Element 2</a>
<a href="#">Element 3</a>
</div>
<div>
Click any element to highlight it. Click anywhere to reset highlighting. Click menu to keep highlighting.
</div>I tried to bind $("body *").not("#menu").click(...);but when I click on #menu then body's onclick event fired too because #menu is body's children.
我试图绑定，$("body *").not("#menu").click(...);但是当我点击 #menu 时，body 的 onclick 事件也被触发，因为 #menu 是 body 的孩子。
回答by ?ime Vidas
$(document).click(function(e) {
if ( $(e.target).closest('#menu').length === 0 ) {
// cancel highlighting
}
});
An alternative solution would be to call stopPropagation()at the end of the #menu click handler and element click handlers. That way, if a click event bubbles to the document object, you know that neither the menu nor the elements were clicked and you can safely cancel the highlighting:
另一种解决方案是stopPropagation()在 #menu 单击处理程序和元素单击处理程序的末尾调用。这样，如果单击事件冒泡到文档对象，您就知道菜单和元素都没有被单击，您可以安全地取消突出显示：
$('#menu').click(function(e) {
// do stuff
e.stopPropagation();
});
$('.element').click(function(e) {
//do stuff
e.stopPropagation();
});
$(document).click(function() {
// cancel highlighting
});
回答by James Hughes
An alternative to writing your own delegated handler for this is to use Ben Almans "outside events" plugin to achieve this. Does pretty much the same thing mentioned by ?ime Vidas but hey - choices are a good thing!
为此编写自己的委托处理程序的另一种方法是使用 Ben Almans“外部事件”插件来实现这一点。是否与 ime Vidas 提到的几乎相同，但是嘿 - 选择是一件好事！
http://benalman.com/projects/jquery-outside-events-plugin/
http://benalman.com/projects/jquery-outside-events-plugin/
So something like this
所以像这样
$('#menu').bind("clickoutside", function(){
// cancel highlighting
})
回答by Kareem
.closestwill propagate and check if one of the parents is the unclickable element.
.closest将传播并检查父元素之一是否是不可点击的元素。
$(document).on('click', '.clickable_parent', function(e){
if(e.target.closest(".UnClickable_child") === null){
//do stuff
}
});
回答by SLaks
You should handle the clickevent on body, then check whether $.contains($('#menu'), e.target).
您应该在click上处理事件body，然后检查是否$.contains($('#menu'), e.target)。
回答by Simon M
$("body *:not(body #menu)").click()
Dont know if this will work, I'm not at my computer...
不知道这是否行得通，我不在我的电脑前...
