我有一些我可以用.click（）函数选择的元素，它们会突出显示。上面有菜单，有一些动作。我想点击任何元素而不是菜单时取消突出显示。
结构体：
<body>
<div id="menu">
</div>
<div id="elements">
/* selectable elements here */
</div>
</body>
可执行示例
$().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>我试图绑定$("body *").not("#menu").click(...);但是当我点击#menu然后身体的onclick事件也被解雇了因为#menu是身体的孩子。
$(document).click(function(e) {
if ( $(e.target).closest('#menu').length === 0 ) {
// cancel highlighting
}
});
另一种解决方案是在#menu点击处理程序和元素点击处理程序的末尾调用stopPropagation()。这样，如果点击事件冒泡到文档对象，您就会知道菜单和元素都没有被点击，您可以安全地取消突出显示：
$('#menu').click(function(e) {
// do stuff
e.stopPropagation();
});
$('.element').click(function(e) {
//do stuff
e.stopPropagation();
});
$(document).click(function() {
// cancel highlighting
});
为此编写自己的委托处理程序的另一种方法是使用Ben Almans“外部事件”插件来实现此目的。几乎与ŠimeVidas提到的相同，但嘿 - 选择是件好事！
http://benalman.com/projects/jquery-outside-events-plugin/
所以这样的事情
$('#menu').bind("clickoutside", function(){
// cancel highlighting
})
你应该在click上处理body事件，然后检查是否$.contains($('#menu'), e.target)。
.closest将传播并检查其中一个父母是否是不可点击的元素。
$(document).on('click', '.clickable_parent', function(e){
if(e.target.closest(".UnClickable_child") === null){
//do stuff
}
});
$("body *:not(body #menu)").click()
不知道这是否有用，我不在我的电脑上......