Question

我所拥有的是一个div和里面的各种元素。现在我不想在div中添加一个click事件，但是不要将它添加到div中具有某个类的元素。

问题是，元素可能位于我不知道的不同层次，因此$("#mydiv > :not(.disabled)").click不起作用。

如何排除某个类的子元素？

Answer 1

$("#mydiv").on("click",function(e){
  if($(e.target).closest("#mydiv .disabled").length){
    return
  }else{
    //do whatever you want to do.
  }
});

如果点击的元素为.disabled

，则忽略该事件

Answer 2

您的代码非常接近您的需求。您只需从直接子选择器切换到普通子选择器。

示例标记：

＆＃13;

<div id="myDiv">
  <div class="enabled"></div>
  <div class="enabled"></div>
  <div class="disabled"></div>
  <div>
    <div class="disabled"></div>
  </div>
</div>

＆＃13;

$("#myDiv > :not(.disabled)")

将忽略第一个禁用的类但不影响任何嵌套元素，因为＆＃34;＆gt;＆＃34;只选择下一级别的孩子。

＆＃13;

$("#myDiv :not(.disabled)")

＆＃13;

将选择#myDiv的所有子项，不包括层次结构中任何位置的.disabled。

正如@Robo Robok所指出的，它不清楚你是否想在#myDiv或其子元素上使用选择器。在此示例中，在禁用区域内的#myDiv内单击将产生所需的效果。但是，如果你的div中有空格，比如填充或儿童之间的空格，点击那里将没有任何效果。

我认为您想要做的是将选择器放在div上，然后防止来自禁用区域的冒泡。

＆＃13;

$("#myDiv").on("click", function(e) {
    if ($(e.target).is(".disabled")) {
      return;
    }
  
    //your code
});

＆＃13;

Answer 3

如果你想抑制对已禁用元素和任何后代元素的点击，那么Sushi的答案是可以的。

如果在某些情况下你有一个带有非禁用后代的.disabled元素，你想要：

允许点击未停用的后代来触发#myDiv点击操作
禁止点击.disabled元素本身

然后执行以下操作：

$("#mydiv").on("click", function(e) {
    // desired action.
}).find(".disabled").on('click', function(e) {
    e.stopPropagation();
});

最有可能导致这种考虑成为问题的情况是具有重度绝对定位的页面，其中DOM层次结构未反映在页面布局中。

Answer 4

你可以使用这样的东西

$("#mydiv :not(.disabled)").on("click", function (event) {
    // DO WHATEVER YOU WANT
    event.stopPropagation(); // Prevents multiple-firing of event
});

这是一个jsfiddle的例子。单击未禁用的元素时，它会显示“单击”消息。但是，如果在禁用的元素位于启用的元素内时未捕获单击事件，则将触发该事件。解决方案是捕获.disabled元素上的click事件，然后停止传播click事件。

$("#mydiv .disabled").on("click", function (event) {
    event.stopPropagation(); // Prevents bubbling up of event
});

jQuery：忽略选择器中的类

4 个答案: