jquery - ejemplos - ¿Cómo hacer clic en el evento SÓLO se inicia el DIV padre, no los niños?

onclick jquery html

Question

Tengo un DIV con un foobar clasificado y algunos DIV dentro de ese DIV que están sin clasificar, pero supongo que están heredando la clase foobar :

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

Quiero que se dispare solo cuando haga clic en algún lugar en el DIV pero no en los DIV de sus hijos.

Answer 1

Hay otra manera que funciona si no te importa orientar solo a los navegadores más nuevos. Solo agrega el CSS

pointer-events: none;

a cualquier niño del div que quiera capturar el clic. Aquí están las tablas de soporte

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

Answer 2

Puedes usar burbujas a tu favor:

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

Answer 3

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 4

Tuve el mismo problema y se me ocurrió esta solución (basada en las otras respuestas)

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

Básicamente dice que si el objetivo es el div, ejecuta el código; de lo contrario, no hagas nada (no lo ocultes)

Answer 5

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

//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 detendrá la propagación (burbujeo) del evento click en cualquiera de los elementos .foobar elementos .foobar para que el evento no llegue a los elementos .foobar para .foobar su controlador de eventos (s) )

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