enfant élément événement DÉTENTE l'événement click parent

Supposons que vous avez un code comme ceci:enfant élément événement DÉTENTE l'événement click parent

<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 click parentDiv lorsque je clique sur le childDiv, Comment puis-je faire ?

Mise à jour

De plus, quelle est la séquence d'exécution de ces deux cas?

Source

2012-12-20 Joe.wang

ceci est appelé événement bouillonnant, un bon point de départ: - http: // stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capture – Pranav

Vous devez utiliser event.stopPropagation()

Live Demo

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

event.stopPropagation()

Description: Evite l'événement de bouillonner l'arbre DOM, empêchant les gestionnaires de parents d'être notifié de l'événement.

Source

2012-12-20 06:52:54 Adil

Si vous avez 2 gestionnaires distincts pour le parent et l'enfant cliquez sur les événements et que vous souhaitez déclencher uniquement le gestionnaire enfant par événement click sur l'enfant, vous avez appeler le event.stopPropagation() sur le childDiv, pas sur le parentDiv –

Sans jQuery: DEMO

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

Source

2012-12-20 06:55:27

Le procédé stopPropagation() arrête le barbotage d'un événement à des éléments parents, ce qui empêche tous les gestionnaires parent d'être informé 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 objet événement).

Syntaxe:

Voici la syntaxe simple à 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(); 
});

Source

2012-12-20 06:56:53

événement Click Bubbles, ce qu'on entend en bouillonnant, un bon point de départ est here. , vous pouvez utiliser event.stopPropagation(), si vous ne voulez pas que cet événement doit se propager plus loin.

également un bon lien pour désigner le MDN

Source

2012-12-20 07:00:26 Pranav

J'ai fait face au même problème et le résoudre 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"); 
}

Source

2015-11-23 12:35:08

enfant élément événement DÉTENTE l'événement click parent

Répondre

Questions connexes