jQuery Нажмите все внутри элемента

Question

Когда я нажимаю что-либо на странице, кроме .card, я хочу, чтобы моя функция работала. Однако он отлично работает, если у меня есть <h2>hello</h2> внутри моего .card, и я нажимаю на него, он также срабатывает.

Как мне заставить мой jQuery не срабатывать, если все / любые элементы внутри .card нажимаются, в том числе .card?

Вот мой код:

$('body').click(function(evt){    
   if(!$(evt.target).is('.card')) {
      $('.card').removeClass('active');
      $('.offer2').addClass('active');
    }
 });

Answer 1

Проверьте, находится ли выбранный элемент внутри карты или нет

$(evt.target).closest(".card").length == 0 проверяет, есть ли родительская карта, если длина равна 0, то вы знаете, что не щелкали внутри карты

$('body').click(function(evt){    
   if($(evt.target).closest(".card").length == 0) {
      console.log("hi");
    }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <h2>not hi</h2>
  not hi
</div>

<h1>hi</h1>

В качестве альтернативы вы также можете сделать что-то вроде этого, отменить клик для .card, вернув false, все, что внутри карты, также попадет в ловушку

$('body').click(function(evt) {
  console.log("hi");
});

$('.card').click(function(e) {
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <h2>not hi</h2>
</div>

<h1>hi</h1>

Answer 2

При клике на элементе объект события передается в функцию, подобную function(evt) Событие evt имеет свойство target, которое содержит текущий элемент и его родительский элемент html. Поэтому, когда происходит событие щелчка, нам нужно проверить ближайший элемент с указанным c class / ID, например, card. Если в целевом свойстве нет ближайшего элемента с картой класса, это означает, что мы щелкнули за пределами элемента карты.

   $('body').on('click', function(evt){    
      if($(evt.target).closest('.card').length<=0){
//Write your code here. 
console.log('Clicked out side Card');

    }
     });