Propriété : Event.bubbles

<div id="niveau1" class="captureClick">
<div id="niveau2">
<div id="niveau3">
<div id="btn1" class="btn radius btn-outline cursor-pointer">Cliquez moi : le click remonte jusqu'au div#niveau1</div>
<div id="btn2" class="btn radius btn-outline cursor-pointer">Cliquez moi : le click s'arrête</div>
</div>
</div>
</div>
<script>
/* Gestionnaire d'événement sur le div de niveau supérieur */
document.querySelector("div.captureClick").addEventListener("click", function(myEvent) {
console.log("Gestionnaire de clic sur le niveau supérieur depuis div="+myEvent.target.getAttribute("id"));
});

/* Gestionnaire d'événement sur les boutons */
document.querySelector("div#btn1").addEventListener("click", function(myEvent) {
console.log("Clic sur btn1");
});
document.querySelector("div#btn2").addEventListener("click", function(myEvent) {
console.log("Clic sur btn2 avec stopPropagation()");
myEvent.stopPropagation();
});



</script>

Emulation de la console

Un div à plusieurs niveaux de profondeur est cliqué.
On remarque que l'événement clic remonte de niveau en niveau sur le clic du div#btn1
Tandis que l'événement est stoppé sur le div#btn2

Dunod Fnac Amazon

Chargement
en cours...