Как иметь событие click только огонь на родительском DIV, а не дети?

Question

Как иметь событие click только огонь на родительском DIV, а не дети?

У меня есть DIV с классом foobar, и через несколько ДИВС внутри, что div, который является неклассным, но я предполагаю, что они наследуют foobar класс:

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

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

596 6

jQuery events onclick

6 ответов:

Comments

Ничего не найдено.

4 revs, 3 users 96%user1106925 · Accepted Answer · 2015-12-03 17:26:35

если 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>

hobberwickey · Accepted Answer · 2016-07-13 18:56:33

есть еще один способ, который работает, если вы не возражаете только против более новые браузеры. Просто добавьте CSS
pointer-events: none;
для любых дочерних элементов div, которые вы хотите захватить щелчок. Вот таблицы поддержки

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

ori · Accepted Answer · 2012-02-07 22:40:29

вы можете использовать пузырение в свою пользу:
$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

Jasper · Accepted Answer · 2012-02-07 22:44:07

//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 элемент(ы), чтобы запустить их обработчик(ы) событий.

вот демо:http://jsfiddle.net/bQQJP/

Michalis · Accepted Answer · 2013-05-10 11:42:13

$(".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
})

Wonx2150 · Accepted Answer · 2018-02-28 15:12:24

У меня была та же проблема, и я придумал это решение (на основе других ответов)
 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});
в основном он говорит, что если целью является div, то запустите код, иначе ничего не делайте (не скрывайте его)