2012-05-11 17 views
8

tengo el siguiente código html:sin onclick cuando se hace clic niño

<div class="outerElement"> 
    <div class="text"> 
    Lorem ipsum dolar sit amet 
    </div> 
    <div class="attachment"> 
     <!-- Image from youtube video here --> 
    </div> 
</div> 

Y tengo un evento onclick jQuery en el ".outerElement", sin embargo, no quiero la ".outerElement" evento onclick para ser Cuando hago clic en el archivo adjunto, ¿hay alguna forma de evitar esto o para verificar en qué elemento se hace clic?

+1

posible duplicado de [Cómo evitar un evento de clic() a través de un div interno a div principal en jQuery?] (Http://stackoverflow.com/questions/7835775/how-to-prevent-a-click-event -through-an-internal-div-to-parent-div-in-jquery) y [¿Cómo evito que se active el evento onclick de un padre cuando se hace clic en un anclaje secundario?] (http://stackoverflow.com/questions/ 1369035/how-do-i-prevent-a-parents-onclick-event-from-despedida-cuando-un-niño-ancla-es-cli) y [¿Cómo puedo detener la activación de un evento onclick para el elemento padre cuando el niño se hace clic?] (http://stackoverflow.com/q/985389/218196). –

+0

Lo siento, hice algunas búsquedas tanto en google como en stackoverflow pero no pude encontrar ningún resultado que pudiera ayudarme. – xorinzor

Respuesta

14

Use event.stopPropagation() en el elemento secundario.

$(".attachment").on("click", function(event){ 
    event.stopPropagation(); 
    console.log("I was clicked, but my parent will not be."); 
}); 

Esto evita que el evento burbujee el DOM en el nodo padre.

También forma parte del objeto event el . Esto te dirá con qué elemento se inició el evento. Sin embargo, en este caso, stopPropagation parece ser la mejor solución.

$(".outerElement").on("click", function(event){ 
    console.log(event.target); 
}); 
0

no estoy seguro de si se puede evitar que el evento de disparar cuando se hace clic en el elemento attachment pero ciertamente puede filtrar para que

$('.outerElement').click(function() { 
    if ($(this).hasClass('attachment')) { 
    return; 
    } 
    // Handle event 
}); 
1

Esto funciona sin jQuery

<div class="outerElement"> 
    <div class="attachment">Hello</div> 
</div> 

<script type="text/javascript"> 
document.getElementsByClassName('outerElement').onclick = function(){ 

    alert('You clicked on parent'); 

} 
document.getElementsByClassName('attachment').onclick = function(){ 

    event.stopPropagation(); 
    alert('You clicked on child'); 

} 
</script> 
0

Simplemente estableciendo onclick="event.stopPropagation();" en los niños hará.

Cuestiones relacionadas