Javascript: bouton activer/désactiver Mouseover/mouseOut

Question

Cela devrait être assez 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 obtient disabled..yay! Mais maintenant, quand je déplace le curseur, il n'est pas activé ... boo. Je comprends que le concept de désactivation signifie que vous ne pouvez rien faire avec. Mais comment l'obtenir avec une souris? C'est possible? Est-ce que je manque quelque chose?

Answer 1

Vous devez définir le pointeur du curseur sur disabled = '' à la place.

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

La propriété disabled ne vérifie que si elle existe. Vous pouvez définir disabled = 'n'importe quoi' et il sera désactivé. Auparavant, vous n'aviez besoin que du mot-clé disabled dans vos attributs, mais pour un XHTML valide, vous devez définir chaque attribut égal à quelque chose.

EDIT: J'ai joué avec un peu cette question et a ajouté un peu de rembourrage à l'étiquette SPAN et permet aux événements de fonctionner correctement. Sans rembourrage, il ne piège pas les événements car le bouton d'entrée est désactivé. Je viens de rendre le fond rouge, donc il était facile de voir la zone SPAN utilisée.

<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> 

Answer 2

vous pourriez avoir un élément extérieur qui l'entoure et ont un onmouseover pour cet élément extérieur qui permet à l'élément interne.

Answer 3

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 désactivé avec une classe 'disabled' et l'événement gère l'association avec celui-ci. Fonctionne bien pour les boutons, mais je suppose que ce ne serait pas pour les entrées de texte et les cases à cocher.

Answer 4

Divs à la rescousse!

Dommage que personne n'ait 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> 

Puis:

• Mettez un survol de la souris sur gestionnaire buttonMouseCatcher que:
  • change, il est z-index à -1 et
  • permet le bouton.
• Mettez un gestionnaire de la souris sur le bouton que:
  • change le z-index de buttonMouseCatcher retour à 1 et
  • désactive le bouton.