Dev Faq
0
votes

Comment utiliser l'événement de Blur pour tag

J'ai besoin de fermer un div code> lorsque je clique n'importe où sur l'écran sauf l'image. La fonction onblur code> n'appelle même pas l'alerte code>. S'il vous plaît aider.

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="myImg.png" height="23" width="18" class="myClass" style="margin-top: -42px!important;margin-left: 145px !important;position:relative;" onclick="test()" />

4 commentaires

Fyi je ne pense pas qu'il y ait un événement flou pour l'image, flou est principalement utilisé sur les entrées et les champs de texte. Essayez Cliquez sur à la place de flou , et il n'y a pas besoin de onclick attribut sur l'image

Où vous avez défini .MYCLASS dans votre HTML?

@Raeeshalam à droite dans la balise IMG

Vous pouvez réaliser par élément de bouton, avez-vous besoin d'envelopper le bouton de l'image à l'intérieur.

3 Réponses :

1
votes

éléments, par défaut, vous ne pouvez pas donner la mise au point. S'ils ne peuvent pas être concentrés, ils ne peuvent pas perdre concentrer et déclencher ainsi un événement flou . Bien que vous puissiez utiliser tabindex pour changer cela, vous devez ensuite faire un tas d'autres travaux (par exemple, ajouter ARIA) pour le rendre accessible. Vous préférez simplement utiliser Semantic HTML pour commencer.

  1. enveloppez le avec un élément.
  2. Déplacez les gestionnaires d'événements du img à la touche
  3. Appliquez CSS pour supprimer autant de style par défaut (comme des bordures comme des bordures et la couleur de fond) du bouton comme vous le souhaitez.
0 commentaires
0
votes

Par défaut IMG code> Les éléments ne peuvent pas avoir la mise au point, par conséquent, par proxy, il ne peut pas déclencher un événement flou code>. Pour contourner ce problème, vous pouvez ajouter un attribut tabindex code> au img code> de sorte qu'il puisse être sélectionné. Il déclenchera ensuite un événement code> flou code>.

Notez que cela peut interférer avec le comportement des lecteurs d'écran et d'autres outils d'accessibilité, en fonction de la structure et du contenu de votre page, utilisez donc cette technique avec précaution. p>

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="myImg.png" height="23" width="18" class="myClass" tabindex="1" />

<div class="divClass">I will hide when the img loses focus...</div>

0 commentaires
0
votes

Vous pouvez envelopper img code> avec bouton code> élément. Ensuite, vous pouvez tirer flou code> & Focus code> Event sur le bouton en raison de par défaut img code> n'a pas flou code> événement. p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn-forimg myClass"><img src="https://i.stack.imgur.com/fcbpv.jpg" width="50"></button>
<div class="divClass">This div will disappear when button blur</div>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO