Как сделать так, чтобы событие клика срабатывало ТОЛЬКО на родительском DIV, а не на детях?

Question

У меня есть DIV с классифицированным foobar и несколько DIV внутри этого DIV, которые не классифицированы, но я предполагаю, что они наследуют класс foobar:

$('.foobar').on('click', function() { /*...do stuff...*/ });

Я хочу, чтобыСрабатывает только при нажатии где-нибудь в DIV, но не на дочерних DIV.

Answer 1

Если e.target - это тот же элемент, что и this, вы не нажали на потомка.

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});

.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>

Answer 2

Есть еще один способ, который работает, если вы не возражаете, ориентируясь только на новые браузеры.Просто добавьте CSS

pointer-events: none;

к любым дочерним элементам div, которые вы хотите захватить кликом.Вот таблицы поддержки

http://caniuse.com/#feat=pointer-events

Answer 3

Вы можете использовать барботирование в свою пользу:

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

Answer 4

//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

Это остановит распространение (всплытие) события click на любом из дочерних элементов элемента (ов) .foobar, поэтому событие не достигнет элемента .foobar(s), чтобы запустить их обработчик (и) событий.

Вот демонстрационная версия: http://jsfiddle.net/bQQJP/

Answer 5

Я не получил принятый ответ на работу, но, похоже, это сработало, по крайней мере, в ванильном JS.

if(e.target !== e.currentTarget) return;

Answer 6

$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

Answer 7

Мой случай похож, но это случай, когда у вас есть несколько foobar -ок, и вы хотите закрыть только один - за один клик:

Найти родительский регистр

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

Найди детский чемодан

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

Answer 8

У меня была такая же проблема, и я нашел это решение (основываясь на других ответах)

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

По сути, это говорит, что если целью является div, тогда запустите код, иначе ничего не делайте (не скрывайте его)

Answer 9

Вы можете использовать event.currentTarget.Это будет делать событие клика только тем, кто получил событие.

target = e => {
    console.log(e.currentTarget);
  };

<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>