Comment identifier l'initiateur d'un événement de flou à l'aide de la propriété RelatedTarget ?

Détermination de l'élément qui a déclenché un événement de flou

Énoncé du problème :

Lorsqu'un flou événement se produit sur un élément d'entrée HTML, comment pouvons-nous connaître l'ID de l'élément qui a déclenché la perte de focus ?

Réponse :

Pour identifier l'élément qui a incité un événement de flou, nous pouvons exploiter la propriété RelatedTarget de l'événement. Cette propriété représente l'élément cible qui a reçu le focus suite au flou.

Par exemple, considérons le scénario suivant :

<code class="html"><input id="myInput" onblur="onBlurEvent()" />
<span id="mySpan">Hello World</span></code>

Lorsque vous perdez le focus de myInput en cliquant sur mySpan, onBlurEvent() la fonction sera déclenchée. Pour déterminer l'ID de l'élément qui a reçu le focus (mySpan), nous pouvons accéder à la propriété RelatedTarget au sein de la fonction :

<code class="js">function onBlurEvent() {
  console.log(event.relatedTarget.id); // Output: "mySpan"
}</code>

Contexte supplémentaire :

Cette technique trouve une application dans les scénarios où vous devez supprimer le comportement de flou par défaut et empêcher la saisie semi-automatique de disparaître si un élément spécifique est cliqué. Pour y parvenir, vous pouvez vérifier le event.ratedTarget.id dans la fonction onBlurEvent() et ignorer l'événement de flou s'il provient de l'élément souhaité.

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!