{{APIRef("DOM Events")}}
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 {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.
MouseEvent dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("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 {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.
Plusieurs événements plus spécifiques sont basés sur MouseEvent, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.
MouseEvent.Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.
true (vrai) si la touche alt est pressée lorsque l'événement est lancé.Les boutons qui sont pressés alors que l'événement est lancé.
true si la touche ctrl est pressée alors que l'événement est lancé.true si la touche méta est pressée alors que l'événement est lancé.null est retourné.La seconde cible pour l'événement, s'il y en a une.
true si la touche Maj est pressée alors que l'événement est lancé.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).Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.
MouseEvent créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.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 :
{{ EmbedLiveSample('Example', '', '', '') }}
| Spécification | Statut | Commentaire |
|---|---|---|
| {{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | Redéfinit MouseEvent de long à double. C'est-à-dire qu'un PointerEvent dont le pointerType est "souris" est un double. |
| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} | {{Spec2('HTML WHATWG')}} | Ajout de la propriété region à partir de {{SpecName('DOM3 Events')}}. |
| {{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}} | {{Spec2('Pointer Lock')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés movementX et movementY. |
| {{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | À partir de {{SpecName('DOM3 Events')}}, 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. |
| {{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}} | {{Spec2('DOM3 Events')}} | À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur MouseEvent(), de la méthode getModifierState() et de la propriété buttons. |
| {{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}} | {{Spec2('DOM2 Events')}} | Définition initiale. |
{{Compat("api.MouseEvent")}}