MouseEvent

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Sommaire

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 éléments courants utilisant cette interface incluent : click, dblclick, mouseup, mousedown. La liste de tous les événements utilisant cette interface est fournie dans la référence des événements.

MouseEvent dérive de UIEvent, qui à son tour dérive d'Event.

Propriétés

MouseEvent.altKey Lecture seule
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
true si la touche contrôle est pressée alors que l'événement est lancé.
MouseEvent.metaKey Lecture seule
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 de la 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 de la dernier événement mousemove lancé.
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
true si la touche shift 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).

 

Les méthodes

MouseEvent.getModifierState()
Retourne l'état actuel de la touche de modification spécifiée. Voir KeyboardEvent.getModifierState() pour plus de détails.

Initialiser un événement souris

Cliquez ici pour voir comment initier un événement souris (mouse event) 

Exemple

Cet exemple montre la simulation d'un clic (événement de clic généré par le code) sur une case à cocher en utilisant des méthodes du DOM.

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  var cb = document.getElementById("checkbox"); //élément sur lequel cliquer
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("Annulé");
  } else {
    // None of the handlers called preventDefault
    alert("Pas annulé");
  }
}
document.getElementById("button").addEventListener('click', simulateClick);
<p><label><input type="checkbox" id="checkbox"> Coché</label>
<p><button id="button">Cliquez moi</button>

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

Spécifications

Spécification État Commentaire
Document Object Model (DOM) Level 2 Events Specification
La définition de 'MouseEvent' dans cette spécification.
Recommendation  
Document Object Model (DOM) Level 3 Events Specification
La définition de 'MouseEvent' dans cette spécification.
Version de travail  
UI Events
La définition de 'MouseEvent' dans cette spécification.
Version de travail Étend DOM3
Pointer Lock
La définition de 'MouseEvent' dans cette spécification.
Candidat au statut de recommandation Étend l'interface MouseEvent

Compatibilité des navigateurs

Caractéristique Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support basique  (Oui) (Oui) (Oui) (Oui) (Oui)
movementX
movementY
(Oui) moz (Oui) webkit ? ? ?
buttons (Oui) Pas de support ? ? ?
which 1.0 1.0 9.0 5.0 1.0
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Notes sur Gecko

Constantes spécifiques

Les valeurs possibles pour MouseEvent.mozInputSource sont listées dans le tableau suivant. Elles sont disponibles comme propriétés de l'interface MouseEvent (ex. : MouseEvent.MOZ_SOURCE_UNKNOWN).

Nom de la constante Valeur Desription
MOZ_SOURCE_UNKNOWN 0 Le dispositif d'entrée n'est pas reconnu.
MOZ_SOURCE_MOUSE 1 L'événement a été généré par une souris (ou un appareil du même type).
MOZ_SOURCE_PEN 2 L'événement a été généré par un stylo sur une tablette.
MOZ_SOURCE_ERASER 3 L'événement a été généré par une gomme à effacer sur une tablette.
MOZ_SOURCE_CURSOR 4 L'événement a été généré par un curseur.
MOZ_SOURCE_TOUCH 5 L'événement a été généré par une interface tactile.
MOZ_SOURCE_KEYBOARD 6 L'événement a été généré par un clavier.

 

Étiquettes et contributeurs liés au document

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