¿Cómo hacer que el evento de clic SOLO se active en DIV padre, no en hijos?

Question

que tienen un DIV con un clasificado foobar, y algunos DIVs dentro de ese DIV que son no clasificados, pero supongo que están heredando la clase foobar:

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

quiero que al disparar sólo cuando al hacer clic en algún lugar de el DIV pero no en sus hijos DIVs.

Answer 1

Si el e.target es el mismo elemento que this, no ha hecho clic en un descendiente.

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

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

Esto evitará la propagación (burbujeo) del evento click en cualquiera de los niños el elemento (s) del elemento (s) .foobar por lo que el caso no lo hará llegue al elemento .foobar para activar su controlador de eventos.

Aquí es una demostración: http://jsfiddle.net/bQQJP/

Answer 3

Puede utilizar burbujeo a su favor:

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

Answer 4

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

Hay otra forma en que funciona si no le importa solamente dirigidas a nuevos navegadores. Solo agregue el CSS

pointer-events: none; 

para cualquier niño del div que desee capturar el clic. He aquí las mesas de apoyo

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

Answer 6

que tenía el mismo problema y se acercó con esta solución (basados ​​en las otras respuestas)

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

Básicamente se dice si el objetivo es el div continuación, ejecute el código de lo contrario no hacer nada (no ocultarlo)