Supposons que vous ayez 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 le parentDiv lorsque je clique sur le bouton childDiv Comment faire ?
Mise à jour
Par ailleurs, quelle est la séquence d'exécution de ces deux événements ?
Vous devez utiliser event.stopPropagation()
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});Description : Empêche l'événement de remonter dans l'arbre DOM, empêchant tout gestionnaire parent d'être informé de l'événement.
Sans jQuery : DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
J'ai rencontré le même problème et je l'ai résolu avec 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");
}
En stopPropagation() arrête la diffusion d'un événement aux éléments parents, empêchant ainsi tout gestionnaire parent d'être informé de l'événement.
Vous pouvez utiliser la méthode event.isPropagationStopped() pour savoir si cette méthode a é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();
}); Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
