Evento de clic del elemento secundario desencadena el evento de clic principal

Digamos que tienes algún código como este: 

<html>
<head>
</head>
<body>
   <div id="parentDiv" onclick="alert('parentDiv');">
       <div id="childDiv" onclick="alert('childDiv');">
       </div>   
    </div>
</body>
</html>​

No quiero activar el evento de clic parentDiv cuando hago clic en el childDiv, ¿Cómo puedo hacer esto?

Actualizado

Además, ¿cuál es la secuencia de ejecución de estos dos eventos?

Author: CDspace, 2012-12-20
Source

5 answers

Necesitas usar el evento .stopPropagation()

Demostración En Vivo

$('#parentDiv').click(function(event){
    event.stopPropagation();
    alert(event.target.id);
});​

Evento.stopPropagation()

Descripción: Evita que el evento burbujee en el árbol DOM, evitar que se notifique el evento a los controladores principales.

 54
Author: Adil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-07 11:56:34

Sin jQuery : DEMO

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>
 16
Author: Akhil Sekharan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-20 06:55:27

El método stopPropagation() detiene el burbujeo de un evento a los elementos padre, evitando que cualquier controlador padre sea notificado del evento.

Puede usar el método event.isPropagationStopped() para saber si este método fue llamado alguna vez (en ese objeto de evento).

Sintaxis:

Aquí está la sintaxis simple para usar este método: 

event.stopPropagation()

Ejemplo:

$("div").click(function(event) {
    alert("This is : " + $(this).prop('id'));

    // Comment the following to see the difference
    event.stopPropagation();
});​
 6
Author: palaѕн,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-20 06:56:53

Me enfrenté al mismo problema y lo resuelvo por este método. html :

<div id="parentDiv">
   <div id="childDiv">
     AAA
   </div>
    BBBB
</div>

JS: 

$(document).ready(function(){
 $("#parentDiv").click(function(e){
   if(e.target.id=="childDiv"){
     childEvent();
   } else {
     parentEvent();
   }
 });
});

function childEvent(){
    alert("child event");
}

function parentEvent(){
    alert("paren event");
}
 5
Author: Kamuran Sönecek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-23 12:35:08

Haga clic en event Bubbles, ahora lo que se entiende por burbujeo, un buen punto para comenzar es aquí. puede usar event.stopPropagation(), si no desea que ese evento se propague más.

También es un buen enlace para consultar MDN

 3
Author: Pranav,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:26