JQuery：单击除某些元素外的所有位置答案

【问题标题】：JQuery: click everywhere but some elementJQuery：单击除某些元素外的所有位置
【发布时间】：2011-07-18 12:20:36
【问题描述】：

我有一些元素可以使用 .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>

Jsfiddle

我尝试绑定$("body *").not("#menu").click(...);，但是当我点击#menu 时，body 的onclick 事件也会触发，因为#menu 是body 的子项。

【问题讨论】：

如果您能提供任何 jsfiddle 或可执行示例，将会很有帮助。
@Black，给你jsfiddle.net/3aqgLpp6/2

标签： javascript jquery click css-selectors

【解决方案1】：

$(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
});

【讨论】：

我尝试使用$(this) 代替$(e.target)，然后所有父元素onclick 也被触发。

【解决方案2】：

.closest 将传播并检查其中一个父元素是否是不可点击的元素。

$(document).on('click', '.clickable_parent', function(e){
  if(e.target.closest(".UnClickable_child") === null){
   //do stuff
  }
});

【讨论】：

【解决方案3】：

为此编写自己的委托处理程序的另一种方法是使用 Ben Almans 的“外部事件”插件来实现这一点。与 Šime Vidas 提到的事情几乎相同，但是嘿 - 选择是一件好事！

http://benalman.com/projects/jquery-outside-events-plugin/

像这样的

$('#menu').bind("clickoutside", function(){
    // cancel highlighting
})

【讨论】：

【解决方案4】：

你应该处理body上的click事件，然后检查$.contains($('#menu'), e.target)是否。

【讨论】：

【解决方案5】：

$("body *:not(body #menu)").click()

不知道这是否可行，我不在我的电脑前...

【讨论】：

将点击处理程序绑定到页面上的所有元素？馊主意。此处应使用事件委托。