MouseEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 Expérimental

La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.

MouseEvent.offsetY Lecture seule Expérimental

La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.

MouseEvent.pageX Lecture seule Expérimental

La coordonnée en X du pointeur de la souris relative au document entier.

MouseEvent.pageY Lecture seule Expérimental

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 Non-standard 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 Non-standard 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 Non-standard Lecture seule

La quantité de pression appliquée en cliquant.

MouseEvent.x Expérimental Lecture seule

Alias pour MouseEvent.clientX.

MouseEvent.y Expérimental Lecture seule

Alias pour MouseEvent.clientY.

Constantes

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Non-standard Lecture seule: Force minimum nécessaire pour un click normal.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Non-standard 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() Obsolète: 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);

html

<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p><button id="button">Click me</button></p>

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

Spécifications

Specification
UI Events # interface-mouseevent
CSSOM View Module # extensions-to-the-mouseevent-interface
Pointer Lock 2.0 # extensions-to-the-mouseevent-interface

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Son parent direct, UIEvent.
PointerEvent : Pour les événements avancés du pointeur, y compris le multi-touch.