mouseover

L'événement mouseover est déclenché lorsqu'un dispositif de pointage passe au dessus d'un élément lié à l'écouteur d'événement, ou au dessus de l'un de ses enfants.

Informations générales

Specification
DOM L3
Interface
MouseEvent
Propagation
Oui
Annulable
Oui
Cible
Élément
Action par défaut
Aucune

Propriétés

Property Type Description
target Lecture seule EventTarget The event target (the topmost target in the DOM tree).
type Lecture seule DOMString The type of event.
bubbles Lecture seule Boolean Whether the event normally bubbles or not
cancelable Lecture seule Boolean Whether the event is cancellable or not?
view Lecture seule WindowProxy document.defaultView (window of the document)
detail Lecture seule long (float) A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget Lecture seule EventTarget The node that had the event listener attached.
relatedTarget Lecture seule EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX Lecture seule long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Lecture seule long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX Lecture seule long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Lecture seule long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button Lecture seule unsigned short The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons Lecture seule unsigned short The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure Lecture seule float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey Lecture seule boolean true if the control key was down when the event was fired. false otherwise.
shiftKey Lecture seule boolean true if the shift key was down when the event was fired. false otherwise.
altKey Lecture seule boolean true if the alt key was down when the event was fired. false otherwise.
metaKey Lecture seule boolean true if the meta key was down when the event was fired. false otherwise.

Exemple

L'exemple suivant illustre la différence entre les événements mouseover et mouseenter.

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
  var test = document.getElementById("test");
  
  
  // ce gestionnaire sera exécuté une seule fois lorsque le curseur passera au dessus de la liste non ordonnée
  test.addEventListener("mouseenter", function( event ) {   
    // met en surbrillance la cible de mouseenter
    event.target.style.color = "purple";

    // réinitialise la couleur après un court moment
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
  
  
  // ce gestionnaire sera exécuté à chaque fois que le curseur passe au dessus de chaque élément de la liste
  test.addEventListener("mouseover", function( event ) {   
    // met en surbrillance la cible de mouseover
    event.target.style.color = "orange";

    // réinitialise la couleur après un court moment
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Support de base (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
Sur des éléments form désactivés (Oui)[1] 44.0 (44.0)[2] (Oui) Pas de support (Oui)[1] ?
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? (Oui) ? ? ? ?
Sur des éléments form désactivés ? Pas de support ? ? ? ?

[1] Ne fonctionne que pour les éléments <textarea> et quelques types de l'élément <input>.

[2] Implémenté dans bug 218093.

Voir aussi