L'interface MouseEvent représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent click, dblclick, mouseup et mousedown.

MouseEvent dérive de UIEvent, qui lui-même est issu d'Event. Bien que la méthode MouseEvent.initMouseEvent() soit conservée à des fins de compatibilité descendante, la création d'un objet MouseEvent doit être effectuée à l'aide du constructeur MouseEvent().

Plusieurs événements plus spécifiques sont basés sur MouseEvent, y compris WheelEvent et DragEvent.

Constructeur

MouseEvent()
crée un objet MouseEvent.

Propriétés

Cette interface hérite aussi des propriétés de ses parents UIEvent et Event.

MouseEvent.altKey Lecture seule
renvoie true (vrai) si la touche alt est pressée lorsque l'événement est lancé.
MouseEvent.button Lecture seule
Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.
MouseEvent.buttons Lecture seule

Les boutons qui sont pressés alors que l'événement est lancé.

MouseEvent.clientX Lecture seule
La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).
MouseEvent.clientY Lecture seule
La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).
MouseEvent.ctrlKey Lecture seule
renvoie true si la touche ctrl est pressée alors que l'événement est lancé.
MouseEvent.metaKey Lecture seule
renvoie true si la touche méta est pressée alors que l'événement est lancé.
MouseEvent.movementX Lecture seule
La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement mousemove lancé.
MouseEvent.movementY Lecture seule
La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement mousemove lancé.
MouseEvent.offsetX Lecture seule
La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
MouseEvent.offsetY Lecture seule
La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
MouseEvent.pageX Lecture seule
La coordonnée en X du pointeur de la souris relative au document entier.
MouseEvent.pageY Lecture seule
La coordonnée en Y du pointeur de la souris relative au document entier.
MouseEvent.region Lecture seule
renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, null est retourné.
MouseEvent.relatedTarget Lecture seule

La seconde cible pour l'événement, s'il y en a une.

MouseEvent.screenX Lecture seule
La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).
MouseEvent.screenY Lecture seule
La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).
MouseEvent.shiftKey Lecture seule
renvoie true si la touche Maj est pressée alors que l'événement est lancé.
MouseEvent.which Lecture seule
Le bouton qui est pressé alors que l'événement est lancé.
MouseEvent.mozPressure Lecture seule
La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum).
MouseEvent.mozInputSource Lecture seule
Le type d'appareil qui a généré l'événement (une des constantes MOZ_SOURCE_* listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement).
MouseEvent.webkitForce Lecture seule
La quantité de pression appliquée en cliquant.
MouseEvent.x Lecture seule
Alias pour MouseEvent.clientX.
MouseEvent.y Lecture seule
Alias pour MouseEvent.clientY.

  Constantes

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Lecture seule
Force minimum nécessaire pour un click normal.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Lecture seule
Force minimum nécessaire pour un click fort.

Les méthodes

Cette interface hérite aussi des méthodes de ses parents UIEvent et Event.

MouseEvent.getModifierState()
Retourne l'état actuel de la touche de modification spécifiée. Voir KeyboardEvent.getModifierState() pour plus de détails.
MouseEvent.initMouseEvent()
initialise la valeur de l'MouseEvent créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.

Exemple

Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementById("checkbox"); //élément pour cliquer
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // Un gestionnaire appelé preventDefault
    alert("canceled");
  } else {
    // Aucun des gestionnaires n'est appelé preventDefault
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener('click', simulateClick);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

Cliquez sur le bouton pour voir comment l'exemple fonctionne :

Spécifications

Spécification Statut Commentaire
CSS Object Model (CSSOM) View Module
La définition de 'MouseEvent' dans cette spécification.
Version de travail Redéfinit MouseEvent de long à double. C'est-à-dire qu'un PointerEvent dont le pointerType est "souris" est un double.
HTML Living Standard
La définition de 'MouseEvent.region' dans cette spécification.
Standard évolutif Ajout de la propriété  region  à partir de Document Object Model (DOM) Level 3 Events Specification.
Pointer Lock
La définition de 'MouseEvent' dans cette spécification.
Candidat au statut de recommandation À partir de Document Object Model (DOM) Level 3 Events Specification, ajout des propriétés movementX et movementY.
CSS Object Model (CSSOM) View Module
La définition de 'MouseEvent' dans cette spécification.
Version de travail À partir de Document Object Model (DOM) Level 3 Events Specification, ajout des propriétés offsetX et offsetY, pageX et pageY, x et y. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme double et non plus long.
Document Object Model (DOM) Level 3 Events Specification
La définition de 'MouseEvent' dans cette spécification.
Obsolete À partir de Document Object Model (DOM) Level 2 Events Specification, ajout du constructeur MouseEvent(), de la méthode getModifierState() et de la propriété buttons.
Document Object Model (DOM) Level 2 Events Specification
La définition de 'MouseEvent' dans cette spécification.
Obsolete Définition initiale.

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 Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
movementX
movementY
37 (Oui) (Oui) moz ? (Oui) 10.1
buttons 43 (Oui) (Oui) ? ? Pas de support
which 1 (Oui) 1.0 9.0 5.0 1.0
getModifierState() 47 (Oui) 15 (15) (Oui) (Oui) (Oui)
mozPressure and mozInputSource Pas de support ? 4.0 (2) Pas de support Pas de support Pas de support
MouseEvent() 45 ? 11 (11) 9.0 (Oui) ?
MouseEvent.region 51[1] ? 32 (32) ? ? ?
MouseEvent.offsetX, and MouseEvent.offsetY (Oui) 9 40 (40) ? ? ?
MouseEvent.screenXMouseEvent.screenYMouseEvent.clientX, and MouseEvent.Y are double instead of long. 56 ? ? ? ? ?
Fonctionnalité Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Pas de support Pas de support (Oui) ? ? ? ?

[1] Nécessite l'activation de l'indicateur ExperimentalCanvasFeatures.

 

Voir aussi

Son parent direct : UIEvent.

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, Sebastianz, Jean-MariePETIT, julienw, AlainRinder, kipcode66
Dernière mise à jour par : loella16,