使用jQuery选择器排除元素及其子元素

Question

我有一个用于筛选的div，希望在点击div外的任何地方时都能关闭它。 我正在尝试构建选择器，基本上选择除了特定元素和其子元素之外的所有元素。 以下是我尝试过但无法正常工作的代码：

$('*:not(:has(.exclude *))').live('click', function() {HideFilter();});

页面结构简化如下:

<div></div>
<div>
 <div></div>
 <div>
  <div class="exclude"><inputs></div>
 </div>
 <div></div>
</div>

所以我想要所有的div，但是除了.exclude中的一个和其中的所有内容都需要有这个事件。我已经做了一段时间了，需要一些帮助。

- zeal

Answer 1

你尝试过吗？

$('*:not(.exclude, .exclude *)').live( ... )

我明白了，问题在于即使你排除这些东西，事件仍然会冒泡上来。尝试使用以下代码：

$('*').live('click', function(e) {
  if (!$(e.target).is('.exclude, .exclude *'))
    // do interesting stuff
  }
  return false;
});

这样可以阻止事件在排除的元素上进一步传播而不实际执行任何操作。

示例页面：http://gutfullofbeer.net/balloon.html

编辑更新，三年后：.live()方法已被淘汰。在新代码中，最后一个示例应该像这样：

$('body').on('click', '*', function(e) {
  if (!$(e.target).closest('.exclude').length) {
    // do interesting stuff
  }
  return false;
});

- Pointy

---

我已经尝试过这个方法，但它仍然会将事件放在.exclude的所有子元素上。 - zeal

你确定你输入的跟那完全一样吗？ - Pointy

调试我的代码时，我注意到选择器的工作是正确的。它只将事件应用于正确的元素。但是我的 div 下面的元素也必须捕获点击事件。 - zeal

Answer 2

怎么样尝试一种稍微不同的策略：

当除了 div 以外的任何东西被点击时，关闭所有内容：

$("body").click(function(e){
  if($(e.target).hasClass("exclude")){
    //show stuff
  } else {
    //hide stuff
  }
});

类似这样的东西

- mkoryak