Jquery选择器:不在子div

时间:2015-07-23 17:48:56

标签: jquery css

我希望能够使用jquery绑定body标记上的click事件,但不能绑定class ='noclick'的子div。

<div>
    <div>you can click here</div>
    <br><br><br>
    <div class='noclick'>NO ALERT</div>
</div> 

这不起作用

$("body:not(.noclick)").on('click', function (e) {
    alert("clicked")
});

这是JSFiddle

3 个答案:

答案 0 :(得分:3)

在您的示例中,:not() pseudo class没有做任何事情。

jQuery选择器$("body:not(.noclick)")将选择没有类body的{​​{1}}元素。在您的示例中,.noclick元素没有body类,这意味着它将被选中,并且点击事件将冒泡到.noclick元素,无论函数是什么将被解雇。

您可以通过检索body对象的target property来访问对被点击元素的引用(在此示例中为event)。

从那里,如果当前元素的类为{{1},您可以使用.closest() method来确定被点击的元素是否具有类e.target 的祖先。 }}

  

.closest() method:

     

对于集合中的每个元素,通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

Updated Example

.noclick

答案 1 :(得分:0)

你所拥有的实际工作,除了点击冒泡DOM,所以你需要抓住.noclick元素上的点击并阻止它传播。一种方法:

$('.noclick').click(function (e) {
    e.stopPropagation();
})

答案 2 :(得分:0)

$("body").on('click', function (e) {
  if(!$(e.target).hasClass('noclick')){
    alert("clicked");
  }
 });