Comment puis-je empêcher la propagation des événements en JavaScript ?

Empêcher la propagation d'événements à l'aide de l'attribut Onclick en ligne

Considérez le code HTML suivant :

<div onclick="alert('you clicked the header')">

Dans ce scénario, lorsque l'utilisateur clique sur l'élément span, l'événement click du span et l'événement click du div sont déclenchés. C'est ce qu'on appelle la propagation d'événements.

Pour empêcher l'événement click du div de se déclencher lorsque l'utilisateur clique sur l'étendue, des techniques de propagation d'événements en ligne peuvent être utilisées :

Méthode stopPropagation :

La méthode la plus largement prise en charge consiste à utiliser la méthode event.stopPropagation() dans l'attribut onclick du span. Voici comment l'implémenter :

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

En appelant stopPropagation(), la propagation de l'événement click est arrêtée au niveau de l'élément span, l'empêchant d'atteindre le div parent.

Compatibilité IE :

Pour Internet Explorer, l'alternative suivante peut être utilisé :

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

Ce code obtient le même résultat que stopPropagation() mais est spécifiquement adapté aux navigateurs IE.

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!