Comment puis-je empêcher la propagation d'événements en HTML à l'aide des attributs onclick en ligne ?-js tutoriel-php.cn

Comment puis-je empêcher la propagation d'événements en HTML à l'aide des attributs onclick en ligne ?

DDD

Libérer： 2024-12-08 22:13:17

original

349 Les gens l'ont consulté

How Can I Prevent Event Propagation in HTML Using Inline onclick Attributes?

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

Lors de la gestion des événements en HTML, il est souvent nécessaire de contrôler la façon dont les événements se propagent à travers le DOM. Cela est particulièrement vrai lors de la gestion d'éléments imbriqués pouvant partager des écouteurs d'événements.

Considérons l'exemple suivant :

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

Copier après la connexion

Dans ce cas, les éléments

(en-tête) et les éléments ont des attributs onclick en ligne qui affichent une alerte lorsque vous cliquez dessus. Par défaut, en cliquant sur le bouton l'élément déclenchera à la fois l'élément et

événements, ce qui peut ne pas être le comportement souhaité.

Pour empêcher la propagation des événements et déclencher uniquement le événement, nous devons empêcher l'événement de se propager jusqu'à l'élément parent. Ceci peut être réalisé en utilisant les techniques suivantes :

Utilisation de event.stopPropagation() (navigateurs modernes)

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

Copier après la connexion

Utilisation de window.event.cancelBubble (Internet Explorer)

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

Copier après la connexion

En ajoutant ces lignes à l'attribut onclick du , nous empêchons la propagation de l'événement vers l'élément parent

élément, nous permettant de gérer l'événement click indépendamment pour chaque élément.

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!

source：php.cn

Article précédent：Comment puis-je fusionner deux tableaux d’objets basés sur une clé partagée sans itération de clé explicite ? Article suivant：Comment puis-je identifier la fonction appelante en JavaScript ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur