Comment puis-je empêcher la propagation des événements dans les éléments imbriqués avec les gestionnaires onclick en ligne ?

Prévenir la propagation des événements avec les attributs Onclick en ligne

Lorsque plusieurs éléments sont imbriqués les uns dans les autres et ont leurs propres gestionnaires d'événements onclick, il est possible pour événements pour se propager dans la hiérarchie DOM, déclenchant des gestionnaires sur les éléments parents. Bien que ce comportement puisse être souhaitable dans certains cas, il peut être nécessaire d'empêcher cette propagation dans d'autres.

Exemple :

Considérez l'extrait de 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>

Lorsque l'utilisateur clique sur le span, cela déclenche à la fois le gestionnaire d'événement onclick du span et l'événement onclick du div gestionnaire. Pour empêcher la propagation de l'événement vers le div, nous pouvons utiliser l'une des méthodes suivantes :

1. event.stopPropagation()

Cette méthode empêche l'événement de se propager plus haut dans l'arborescence DOM.

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

2. window.event.cancelBubble (pour IE)

Pour Internet Explorer, la méthode équivalente est window.event.cancelBubble.

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

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!