如何在 jquery 中使用非选择器 - 不工作

Question

我正在解决此处的覆盖问题。不确定是否有可能让它发挥作用？

.overlay-container 包装器是黑色背景的包装器，使叠加居中。 .overlay 是真正的包装器，具有白色背景、关闭按钮和里面的内容。

我想做的是当用户点击 .overlay-container 区域时，-active class 将被删除。但是overlay在里面，能不能说“里面不是overlay区域”？

$('.overlay-container').not('.overlay-container .overlay').click(function(){
  $(this).removeClass('-active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay-container">
  <div class="overlay">something inside</div>
</div>

Answer 1

已解决[更新]：此代码不会删除 class 活动，除非您在内部叠加层之外单击。

$(".overlay-container").click(function(event) {
if( $(event.target).hasClass('overlay-container')){
    //alert("removed");
  $( this ).removeClass('active');
 }
});

在这里工作：https://jsfiddle.net/gquL65ep/

Answer 2

您可以通过对事件调用 .stopPropagation() 来防止事件冒泡。我假设活动 class 被称为 .overlay-container-active 并且您正在使用固定位置来创建内容所在的覆盖背景。

我还添加了一个按钮来切换叠加层，这样您就可以看到它的工作原理。对于我使用 .on('click') 而不是 .click() 的按钮，请在 Difference between .on('click') vs .click()

阅读更多相关信息

值得一提的是，如果覆盖容器和内容是兄弟姐妹，那么您就不会遇到这个问题；如果您有兴趣，可以考虑一下。

$('.overlay-container-active').click(function(event){
  $(this).removeClass('overlay-container-active');
});

$('.overlay').click(function(event){
  event.stopPropagation();
});

$('button').on('click', function(event) {
  $('.overlay-container').addClass('overlay-container-active');
});

body {
  margin: 0;
  padding: 0;
  background: darkorange;
}

.overlay-container {
  display: none;
  background: black;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.overlay-container-active {
  display: block;
}

.overlay {
  margin: 15px;
  padding: 15px;
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Show overlay</button>
<div class="overlay-container overlay-container-active">
  <div class="overlay">something inside</div>
</div>

如何在 jquery 中使用非选择器 - 不工作

How to use not selector in jquery - not working

jquery

overlay