javascript - jQuery-删除正文上添加的类

检查以下代码段或此fiddler。我想从摘要下面实现两件事，那就是

单击.myBackground时添加.myDiv类
单击.myBackground上的其他位置时，请删除body。

当分别尝试它们时，它们工作正常。但是，当我尝试同时实现这两个目标时，它们并没有达到预期的效果。我知道单击div时都会触发两个click事件，这就是为什么未添加.myBackground的原因。还有其他方法可以满足我的要求吗？

$(document).ready(function() {
  $(document).on('click', '.myDiv', function() {
    $(this).addClass('myBackground');
  });
  $(document).on('click', 'body', function() {
    $('.myDiv.myBackground').removeClass('myBackground');
  })
});

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
</div>

任何帮助表示赞赏。提前致谢。

最佳答案

您的身体中有该元素，因此当您单击它时会同时记录两次点击，仅当该元素不是.myBackground / myDiv元素时，才使用if触发删除操作

$(document).ready(function() {
  $(document).on('click', '.myDiv', function() {
    $(this).addClass('myBackground');
  });
  $(document).on('click', 'body', function(e) {
    if (!$(e.target).is('.myBackground'))
      $('.myBackground').removeClass('myBackground');
  })
});

body {
  height: 200px;
  width: 100%;
}

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="myDiv">
  </div>
</body>