jQuery：忽略选择器中的 class

Question

我有一个 div 和里面的 div 各种元素。现在我不想将点击事件添加到 div，但不要将它添加到具有特定 class.

的 div 内的元素

问题是，元素可以处于我不知道的不同级别，所以 $("#mydiv > :not(.disabled)").click 不起作用。

如何排除具有特定 class 的子元素？

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

您的代码非常接近您的要求。您只需要从直接子项 select 或一般子项切换即可。

示例标记：

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

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

将忽略第一个禁用的 class 但不会影响任何嵌套元素，因为“>”只有 select 下一层的子元素。

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

将 select #myDiv 的所有子级（不包括层次结构中的任何位置的 .disabled）。

正如@Robo Robok 指出的那样，不清楚您是否想要 selector 在 #myDiv 或其子元素上。在此示例中，在 #myDiv 内单击而不是在禁用区域上将产生所需的效果。但是，如果您的 div 中有 space，如 padding 或 space children 之间，单击那里将没有效果。

我想你要做的是将 selector 放在 div 上，然后防止从禁用区域冒泡。

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

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 示例。单击非禁用元素时，它会显示 "click" 消息。但是，如果您在禁用元素位于启用元素内时未捕获点击事件，则会触发该事件。解决方案是捕获 .disabled 元素上的点击事件并停止传播点击事件。

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

jQuery：忽略选择器中的 class

jQuery: Ignore class in selector

javascript

jquery

selector