Javascript Girl
  1. Javascript Girl
  3. Javascript: activez / désactivez le bouton avec mouseover / mouseout
Intereting Posts
Ajout du menu déroulant en utilisant d3.js LiveValidation .remove ne fonctionne pas JQuery question sur la mise en boucle d'un tableau Évaluer dans PhantomJS ne semble pas fonctionner Backbone.js – les données ne sont pas collectées même si l'extraction est réussie Insérer le texte avant et après le texte sélectionné dans javascript Déclenchement de la colonne de grille Bootstrap RxJS: concattez trois promesses, distinguez les résultats Html javascript pour ouvrir une nouvelle fenêtre et fermer la fenêtre actuelle Thème de données par défaut JQuery Mobile Pourquoi ma solution est si lente et comment puis-je améliorer les performances de la requête? Ajoutant rappel pour fonctionner – toujours Comment vérifier si un élément est dans la vue de l'utilisateur avec jquery Traiter avec tel: ancre Une fonction JavaScript qui renvoie les points x, y d'intersection entre deux cercles?

Javascript: activez / désactivez le bouton avec mouseover / mouseout

Cela devrait être très simple:

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled=false;">

Si je place le curseur de la souris sur ce bouton, il est désactivé … alors! Mais maintenant, lorsque je déplace le curseur, il ne s'active pas … boo.

Je comprend que le concept de désactivation signifie que vous ne pouvez rien faire avec lui. Mais comment pouvez-vous l'activer avec une souris? C'est possible? Est-ce que je manque quelque chose?

Vous devriez régler le mouseout sur disabled = '' place. 

 <input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

La propriété désactivée ne regarde que si elle est là. Vous pouvez définir disabled = 'anything' et il sera désactivé. Il suffisait que vous ayez besoin du mot clé disabled dans vos attributs, mais pour le XHTML valide, vous devez définir chaque attribut égal à quelque chose.

EDIT: J'ai joué avec ça un peu et j'ai ajouté un rembourrage à la balise SPAN et permet aux événements de fonctionner correctement. Sans rembourrage, il ne trappe pas les événements car le bouton d'entrée est désactivé. Je viens de rendre le fond rouge de sorte qu'il était facile de voir la zone utilisée par le SPAN . 

 <span style="padding: 8px; background: red;" onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>

Divs to the Rescue!

Dommage, personne n'a vraiment répondu à cette question. Il est possible de faire *. 

 <div style="display: inline-block; position: relative"> <input type="button" id="button" disabled="disabled"> <div id="buttonMouseCatcher" style="position:absolute; z-index: 1; top: 0px; bottom: 0px; left: 0px; right: 0px;"> </div>

Alors:

  • Mettez un gestionnaire de souris sur buttonMouseCatcher pour que:
    • Change son indice z à -1 et
    • Active le bouton.
  • Mettez un gestionnaire de souris sur le bouton qui:
    • Modifie l'index z de buttonMouseCatcher à 1 et
    • Désactive le bouton.

Les éléments de formulaire désactivés ne déclenchent pas les événements de souris, selon les spécifications.

Ce que j'utilise comme solution de contournement consiste à simuler le comportement des personnes handicapées avec une classe «désactivée» et les commandes d'événements associées à celle-ci. Fonctionne bien pour les boutons, mais je suppose que ce ne serait pas pour les entrées de texte et les cases à cocher.

Vous pourriez avoir un élément externe qui l'entoure et avoir un revirement pour cet élément extérieur qui permet l'élément intérieur.