Jquery选择器:不在子div内

ekqde3dh  于 2023-02-15  发布在  jQuery
关注(0)|答案(4)|浏览(181)

我希望能够使用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

raogr8fs

raogr8fs1#

在您的示例中,:not() pseudo class没有执行任何操作。
jQuery选择器$("body:not(.noclick)")将选择一个不包含.noclick类的body元素,在您的示例中,body元素不包含.noclick类,这意味着它将被选中,并且无论如何,click事件将冒泡到body元素,并且函数将被触发。
通过检索event对象(在本例中为e.target)的target property,可以访问对所单击元素的引用。
从那里,您可以使用.closest() method来确定单击的元素是否具有类.noclick * 的祖先,或者如果当前元素具有类.noclick,则使用 *。
.closest() method:
对于集合中的每个元素,通过测试元素本身并遍历DOM树中的祖先元素,获取第一个与选择器匹配的元素。
Updated Example

$(document).on('click', function (e) {
    if (!$(e.target).closest('.noclick').length) {
        alert('Alert');
    }
});
ia2d9nvy

ia2d9nvy2#

你所拥有的东西实际上是有效的,除了点击会使DOM冒泡,所以你需要捕捉.noclick元素上的点击并阻止它传播。

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

vybvopom3#

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

bwitn5fc4#

你也可以更恰当地指定div,你在另一个div中有一个. noclickdiv,这样就触发了div的click,如果你指定div〉div:not(. noclickdiv),它就会起作用。

$(document).ready(function() {
      $("div>div:not(.noclick)").on('click', function (e) {
      alert("clicked")
    });
});

相关问题