web-dev-qa-db-fra.com

L'événement de clic de l'élément enfant déclenche l'événement de clic parent

Disons que vous avez un code comme celui-ci:

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

Je ne veux pas déclencher l'événement parentDiv click lorsque je clique sur childDiv, comment puis-je faire cela?

Mise à jour

Aussi, quelle est la séquence d'exécution de ces deux événements?

javascriptjquerydhtml
55
Joe.wang

Vous devez utiliser event.stopPropagation ()

démonstration en direct

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

event.stopPropagation ()

Description: empêche l’événement de remonter dans l’arborescence DOM, empêchant ainsi les gestionnaires parents d’être avertis de l’événement.

71
Adil

Sans jQuery: DÉMO 

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>
20
Akhil Sekharan

J'ai fait face au même problème et le résous par cette méthode. 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");
}
7
Kamuran Sönecek

La méthode stopPropagation() arrête la propagation d'un événement dans les éléments parents, empêchant ainsi les gestionnaires parents d'être avertis de l'événement.

Vous pouvez utiliser la méthode event.isPropagationStopped() pour savoir si cette méthode a déjà été appelée (sur cet événement).

Syntaxe:

Voici la syntaxe simple pour utiliser cette méthode:

event.stopPropagation()

Exemple:

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

    // Comment the following to see the difference
    event.stopPropagation();
});​
6
palaѕн

Cliquez sur l'événement Bubbles , ce que l'on entend par bullage, un bon point de départ est ici . vous pouvez utiliser event.stopPropagation(), si vous ne voulez pas que cet événement se propage davantage.

Aussi un bon lien à renvoyer sur MDN

3
Pranav