Comment empêcher la propagation des événements des éléments enfants aux éléments parents en HTML ?

Prévenir la propagation des événements avec l'écouteur d'événements Inline Onclick

En HTML, les écouteurs d'événements en ligne nous permettent d'ajouter directement la gestion des événements dans la balise de l'élément. Cependant, nous rencontrons parfois des situations dans lesquelles l'événement d'un élément enfant ne devrait pas déclencher l'événement de l'élément parent.

Problème :

Considérez le code suivant :

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

Dans cet extrait, lorsque l'utilisateur clique sur le span, l'événement click du span et l'événement click du div sont tous deux déclenché.

Solution :

Pour arrêter la propagation des événements du span vers le div, nous pouvons utiliser la méthode event.stopPropagation() :

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

En appelant event.stopPropagation(), nous empêchons l'événement de remonter jusqu'à l'élément parent, isolant ainsi l'événement click de l'élément parent. span.

Alternative pour IE :

Pour les anciennes versions d'Internet Explorer, qui ne prennent pas en charge event.stopPropagation(), nous pouvons utiliser window.event.cancelBubble = true :

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

Cette méthode obtient le même résultat en annulant explicitement la propagation de l'événement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!