JQuery Selector: выберите поле, но не элемент внутри поля

Question

Допустим, у меня есть следующий код:

<div class="body">
  Click me and it will work.
  <div class="head">Click me and nothing will happen.</div>
</div>

Я хочу отобразить "все работает", когда вы нажимаете внутри .body div, но не внутри .head div.Как я могу это сделать?

С этим кодом журнал появляется, даже если вы нажмете head:

<script>
$('.body').click(function(){console.log('it works !');});
</script>

Answer 1

$('.body').click(function(e){

if($(e.target).hasClass('body'))
  console.log('it works !');

});

Answer 2

Пузырьки событий вызывают ваши проблемы.По сути, обработчик событий для вашего класса 'head' будет фиксировать щелчок, а затем отправлять это событие в ваш обработчик 'body', потому что они вложенные.как это работает, и как контролировать всплывающие события.

Здесь работает пример jsFiddle для тестирования.

Answer 3

Это общее решение:

$('.body').click(function(e){
    if(e.target === this) {
        console.log('it works !');
    }
});

Решен похожий вопрос по stackoverflow: Выберите только родителя, исключите все остальное при нажатии ()

Answer 4

Это называется пузырьковым событием. Когда вы нажимаете на div "head", вы также нажимаете на div "body".

Вам необходимо добавить:

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

для предотвращения всплытия событий.