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
Compatibilité des navigateurs
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.screenX , MouseEvent.screenY , MouseEvent.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
UIEvent
.