Come fare in modo che l'evento click SOLO attivi il DIV principale, non i bambini?

Ho un DIV con un classificato foobare alcuni DIV all'interno di quel DIV che non sono classificati, ma suppongo che stiano ereditando la foobarclasse:

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

Voglio che si spenga solo quando si fa clic in un punto del DIV ma non sui DIV dei suoi figli.

Se e.targetè lo stesso elemento di this, non hai fatto clic su un discendente.

$('.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>

C'è un altro modo che funziona se non ti dispiace solo indirizzare i browser più recenti. Aggiungi il CSS

pointer-events: none;

a tutti i figli del div che si desidera acquisire il clic. Ecco le tabelle di supporto

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

Puoi usare il gorgogliamento a tuo favore:

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

Non ho ottenuto la risposta accettata per funzionare, ma questo sembra fare il trucco, almeno nella vaniglia JS.

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

//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)
});

Ciò interromperà la propagazione (bolle) clickdell'evento su uno qualsiasi degli elementi figlio .foobardell'elemento (s) in modo che l'evento non raggiunga il.foobar elemento (i) per attivare i gestori dell'evento.

Ecco una demo: http://jsfiddle.net/bQQJP/

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

Ho avuto lo stesso problema e ho trovato questa soluzione (sulla base delle altre risposte)

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

Fondamentalmente dice se il target è il div quindi eseguire il codice altrimenti non fare nulla (non nasconderlo)

Il mio caso è simile, ma questa è l'occasione in cui hai pochi foobarsecondi e vuoi chiuderne solo uno per ogni clic:

Trova il caso genitore

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

Trova un caso figlio

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

È possibile utilizzare event.currentTarget. Farà clic solo su elemnt che ha ottenuto l'evento.

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

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

Se non riesci a utilizzare pointer-events: none;e stai prendendo di mira i browser moderni puoi utilizzare composedPathper rilevare un clic diretto sull'oggetto in questo modo:

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

Puoi leggere di più su compoundPath qui: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath