Jak uruchomić Zdarzenie click tylko na rodzicu DIV, a nie na dzieciach?

Mam DIV z klasą foobar i kilka Div wewnątrz tego DIV, które nie są zaklasyfikowalne, ale przypuszczam, że dziedziczą klasę foobar: 

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

Chcę, aby odpalić tylko po kliknięciu gdzieś w DIV, ale nie na jego dzieci Div.

Author: Saurav Rastogi, 2012-02-08
Source

6 answers

Jeśli e.target jest tym samym elementem co this, nie kliknąłeś potomka.

$('.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>
 351
Author: 4 revs, 3 users 96%user1106925,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-03 15:26:35

Jest inny sposób, który działa, jeśli nie masz nic przeciwko celowaniu tylko w nowsze przeglądarki. Wystarczy dodać CSS 

pointer-events: none;

Do wszystkich dzieci div, które chcesz uchwycić kliknięcie. Oto tabele wsparcia

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

 30
Author: hobberwickey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-13 15:56:33

Możesz użyć bubbling na swoją korzyść: 

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});
 22
Author: ori,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-07 20:40:29 
//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)
});

Spowoduje to zatrzymanie propagacji (bąbelkowania) zdarzenia click na dowolnym elemencie potomnym elementu(elementów) .foobar, więc zdarzenie nie dotrze do elementu(elementów) .foobar, aby uruchomić obsługę zdarzenia.

Oto demo: http://jsfiddle.net/bQQJP/

 18
Author: Jasper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-07 20:44:07 
$(".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
})
 2
Author: Michalis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-10 08:42:13

Miałem ten sam problem i wymyśliłem to rozwiązanie (na podstawie innych odpowiedzi) 

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

Zasadniczo mówi, że jeśli celem jest div, to Uruchom kod, w przeciwnym razie nic nie rób (nie ukrywaj)

 0
Author: Wonx2150,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-28 13:12:24