Élément enfant clic déclencheur de l'événement parent clic événement
dites 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 de clic parentDiv quand je clique sur le childDiv , Comment puis-je faire cela?
mise à Jour
Aussi, quelle est la séquence d'exécution de ces deux cas?
5 réponses
vous devez utiliser événement.arrêt de la production ()
$('#parentDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
de l'événement.arrêt de la production ()
Description: empêche l'événement de bouillonner dans L'arbre généalogique, empêcher les parents manipulateurs d'être informés de l'événement.
Sans jQuery : DÉMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
la méthode stopPropagation() arrête le bouillonnement d'un événement vers les éléments parents, empêchant tout gestionnaire parent d'être avisé de l'événement.
vous pouvez utiliser la méthode event.isPropagationStopped() pour savoir si cette méthode a jamais été appelée (sur cet objet d'é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();
});
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");
}