1

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

1 ответ 1

3

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');
});
2
  • .on('click', ...) => .click(...). зы: можно еще запретить всплытие у внутреннего дива
    – teran
    15 фев 2021 в 6:28
  • @teran насчёт клика и прочих коротких методов видел неоднократно что они deprecated. На самом сайте jquery этого не написано, но встречалось раньше часто, даже в типах typescript вроде (могу ошибаться). Вот например github.com/jquery/jquery-migrate/blob/master/… . А всплытие запрещать чревато, потом "более глобальные" слушатели могут неверно работать.
    – user347472
    15 фев 2021 в 16:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.