Как использовать не селектор в jquery - не работает

Question

Я исправляю проблему с оверлеем здесь. Не уверен, возможно ли заставить это работать?

Оболочка .overlay-container имеет черный цвет и является центром наложения. И .overlay - это настоящая оболочка с белым фоном, кнопкой закрытия и содержимым внутри.

Что я пытаюсь сделать, это когда пользователь нажимает на область .overlay-container, класс -active будут удалены Но наложение внутри него, можно ли сказать что-то вроде «не наложение области внутри»?

$('.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

Решено [ОБНОВЛЕНИЕ]: этот код не удалит активный класс, если вы не нажмете вне внутреннего наложения.

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

Работает здесь: https://jsfiddle.net/gquL65ep/

Answer 2

Вы можете предотвратить всплывание события, вызвав .stopPropagation() для события. Я сделал предположение, что активный класс называется .overlay-container-active, и вы используете фиксированную позицию для создания фона наложения, в котором находится содержимое.

Я также добавил кнопку для переключения наложения, чтобы вы могли вижу, как это работает. Для кнопки я использовал .on('click') вместо .click(), подробнее об этом читайте в разделе Разница между .on ('click') и .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>