Come fare in modo che l’evento click SOLO faccia fuoco sul genitore DIV, non sui bambini?

Ho un DIV con un foobar classificato e alcuni DIV all’interno di quel DIV che sono non classificati, ma suppongo che stiano ereditando la class del foobar :

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

Voglio che si spari solo quando fai clic da qualche parte nel DIV ma non sui DIV 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; } 
  
.foobar (alert) child (no alert)

C’è un altro modo che funziona se non ti dispiace solo il targeting per i nuovi browser. Basta aggiungere il CSS

 pointer-events: none; 

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

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

Puoi usare le bolle a tuo favore:

 $('.foobar').on('click', function(e) { // do your thing. }).on('click', 'div', function(e) { // clicked on descendant div e.stopPropagation(); }); 
 //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) }); 

Questo interromperà la propagazione (bubbling) dell’evento click su uno qualsiasi degli elementi figli degli elementi .foobar modo che l’evento non raggiunga l’elemento .foobar per .foobar il gestore di eventi (s) ).

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 (basata sulle altre risposte)

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

Fondamentalmente dice che se il target è il div allora esegui il codice altrimenti non fare nulla (non nasconderlo)