单击一个类的事件，但不包括另一个类

Question

我有div，其类别为TaskItem。单击该类时会触发一个事件。

然而，当同一个div包含名为TaskSelected的第二个类时，我不希望点击甚至触发。

是否可以在单个选择器中执行此操作，还是需要检查click事件中是否存在类？

Answer 1

＆＃13;

＆＃13;

$('.TaskItem:not(.TaskSelected)').click(function() {
  alert('click')

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='TaskItem'>no class TaskSelected</div>
<div class='TaskSelected TaskItem'>hass class TaskSelected</div>

＆＃13;

＆＃13;

＆＃13;

这样做是使用:not()选择器

  

描述：从匹配元素集中删除元素。

＆＃13;

＆＃13;

$('.TaskItem').click(function(e) {
  if ($(e.target).hasClass('TaskSelected')) {
    return false
  }

  alert('click')

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='TaskItem'>no class TaskSelected</div>
<div class='TaskSelected TaskItem'>hass class TaskSelected</div>

＆＃13;

＆＃13;

＆＃13;

另一个选择是使用.hasClass

  

描述：确定是否为给定的类分配了任何匹配的元素。

Answer 2

试试这个，

  $("body").on('click','.TaskItem:not(.TaskSelected)',function() {console.log("clicked");});