Howto: div con onclick dentro de otro div con onclick javascript

solo una pregunta rápida. Tengo un problema con los divs con onclick javascript dentro de cada uno. Cuando hago clic en el div interno, solo debo activarlo onclick javascript, pero el javascript del div externo también se activa. ¿Cómo puede el usuario hacer clic en el div interno sin activar javascript div externo?Howto: div con onclick dentro de otro div con onclick javascript

<html> 
<body> 
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div 
    <div onclick="alert('inner');" style="width:200px;height:200px;background-color:white;" />inner div</div> 
</div> 
</div> 
</body> 
</html>

Fuente

2010-03-05 Daniel Brink

Duplicado. http://stackoverflow.com/questions/2015041/two-differents-onclick-on-two-divs-one-over-the-other – vpram86

Pregunta duplicada, pero mejores respuestas. –

Básicamente hay dos modelos de eventos en Javascript. Evento que captura y Evento burbujeando. En el caso de borboteo de eventos, si hace clic en el interior de div, el evento de clic de div interno se dispara primero y luego se activa el clic externo de div. mientras que en la captura de eventos, primero se activa el evento div externo y luego se dispara el evento div interno. Para detener la propagación de eventos, use este código en su método de clic.

if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation();

Fuente

2010-03-05 07:29:13 Adeel

gracias, una respuesta clara simple y funciona perfectamente –

Gracias. Excelente respuesta; justo lo que estaba buscando. –

return false; de la función onclick del div interior:

<div onclick="alert('inner'); return false;" ...

Lo que se está tratando es llamado event propagation.

Fuente

2010-03-05 07:17:26

El método que sugieres en realidad no funciona. (Al menos no en ninguno de los navegadores en los que lo he comprobado por primera vez - Firefox 3.6, IE8.) Tenga en cuenta que su enlace realmente dice que use un método diferente, que di en mi respuesta. –

Mira la información sobre la propagación de eventos here

En particular, usted querrá algo de código como este en sus controladores de eventos para detener la propagación de eventos:

function myClickHandler(e) 
{ 
    // Here you'll do whatever you want to happen when they click 

    // now this part stops the click from propagating 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
}

Fuente

2010-03-05 07:18:09

¡Gracias! esto funcionó para mí – CraZyDroiD

Este es un caso de burbujeo de eventos .

Puede utilizar

e.cancelBubble = true; //IE

e.stopPropagation(); //FF

Fuente

2010-03-05 07:21:39 rahul

me tomó un tiempo para entender, pero lo conseguí, thx –

Here es alguna referencia más para ayudarle en la comprensión Javascript a la propagación de eventos.

Fuente

2010-03-05 07:33:45 Ben

tiene dos 'div' y tres '/ div'.

Fuente

2010-07-24 16:27:20 freddie

una forma más para los navegadores basados en webkit:

<div onclick="alert('inner'); event.stopPropagation;" ...

Fuente

2012-02-23 00:08:22 user1227168

esto funciona pero así: onclick = "alert ('inner'); event.stopPropagation();" –

Esto funcionó para mí y lo probé en Opera (46), Chrome (59.0.3071.115), FireFox Developer (55.0b9 (32 bits)), Internet Explorer 11 –

Esto fue muy útil, pero no funcionó para mí.

Lo que hice se describe here.

por lo que poner una condición al exterior onclick evento:

if(!event.isPropagationStopped()) { 
    window.location.href = url; 
}

Fuente

2012-08-03 07:42:52 shooby

Sólo agregue este código:

window.event.stopPropagation();

Fuente

2014-04-17 15:47:10 user3438083

Esto no funcionó para mí. La respuesta principal es más precisa. –

Usted puede utilizar

$("divOrClassThatYouDontWantToPropagate").click(function(event) { 
 
     event.stopPropagation(); 
 
    });

Fuente

2015-04-22 12:04:44

Howto: div con onclick dentro de otro div con onclick javascript

Respuesta

Cuestiones relacionadas