Comment empêcher la propagation d'événements en JavaScript à l'aide d'Inline onclick ?

Prévenir la propagation des événements avec l'attribut Onclick en ligne

La propagation des événements fait référence à l'effet en cascade des événements à travers l'arborescence DOM. Lorsqu'un événement se produit sur un élément interne, il se propage généralement jusqu'à ses éléments parents. Dans certains scénarios, il peut être souhaitable d'arrêter cette propagation pour éviter un comportement involontaire.

Considérez le code HTML suivant :

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

Lorsqu'un utilisateur clique n'importe où dans la zone élément, les gestionnaires de clic du span et du div se déclencheront. Cependant, nous souhaitons peut-être empêcher le déclenchement de l'événement click du div lorsque l'utilisateur interagit avec son élément enfant.

Pour y parvenir, nous pouvons utiliser la méthode event.stopPropagation(). Cette fonction empêche efficacement l'événement de se propager jusqu'à ses éléments parents. Voici le code modifié :

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

Maintenant, lorsque l'utilisateur clique sur le bouton élément, seul son propre événement click se déclenchera. L'événement click du div ne sera plus déclenché.

Compatibilité IE

Notez que les anciennes versions d'Internet Explorer (IE) ne prennent pas en charge nativement event.stopPropagation(). Au lieu de cela, nous devons utiliser window.event.cancelBubble = true:

<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!