Обработка нажатия на часть родительского элемента, на которой нет дочерних блоков

Question

Есть два блока: div1 и div2. Первый является родительским элементом второго. Как обработать нажатие на часть div1, на которой не находится div2. Желательно с использованием средств jQuery, но можно и на чистом JavaScript.

Answer 1

let parent = document.querySelector('.parent');

parent.addEventListener( 'click', e => {
  if( e.target !== parent ) return;
  console.log('clicked on parent');
});

.parent {
  padding: 50px;
  background-color: gray;
}

.child {
  width: 100px;
  height: 50px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
</div>

На jQuery:

let parent = $('.parent');

parent.on( 'click', e => {
  if( e.target !== parent[0] ) return;
  console.log('clicked on parent');
});

.parent {
  padding: 50px;
  background-color: gray;
}

.child {
  width: 100px;
  height: 50px;
  background-color: blue;
}

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

Если отдельная переменная родителя мешает, то можно делать так:

$('.parent').on( 'click', function(e){ // заменено на обычную функцию
  if( e.target !== this ) return; // заменено на this
  console.log('clicked on parent');
});

БЛОГ НА HUSL

Обработка нажатия на часть родительского элемента, на которой нет дочерних блоков

Ответы (1 шт):