Table des matières
Le Tutoriel de Javascript MouseEvent
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
MouseEvent est une interface qui représente pour les événements se produisant lorsque les utilisateurs interagissent avec des périphériques de pointage (pointing device), tels que la souris, les événements communs tels que click, dbclick, mousedown, mouseup,...
MouseEvent est une sous-interface de UIEvent.
Les types d'événêmnt de MouseEvent :
| Evénement | Description |
|---|---|
| click | L'événement se produit lorsque l'utilisateur clique (click) sur un élément (element). |
| contextmenu | L'événement se produit lorsque l'utilisateur clique avec le bouton droit (right-clicks) de la souris sur un élément pour ouvrir un context-menu. |
| dblclick | L'événement se produit lorsque l'utilisateur double-clique (double-clicks) sur un élément. |
| mousedown | L'événement se produit lorsque l'utilisateur appuie sur un bouton de la souris sur un élément. |
| mouseup | L'événement se produit lorsqu'un utilisateur relâche un bouton de la souris sur un élément. |
| mouseenter | L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément. |
| mouseleave | L'événement se produit lorsque le pointeur (pointer) est déplacé hors d'un élément. |
| mousemove | L'événement se produit lorsque le pointeur se déplace au-dessus d'un élément ou de ses enfants. |
| mouseout | L'événement se produit lorsqu'un utilisateur déplace le pointeur de la souris hors d'un élément, ou hors de l'un de ses enfants. |
| mouseover | L'événement se produit lorsque le pointeur est déplacé sur un élément ou sur l'un de ses enfants. |
mousedown, mouseup, click
Commençons par l'événement le plus courant parmi les événements de la souris qui est click (le clic). Il est formé en appuyant (press down) et en relâchant (release). L'événement click est illustré ci-dessous :
dbclick
Si vous click (cliquez) deux fois rapidement, un événement dbclick sera créé.
mouseover vs mouseenter
L'événement mouseenter se produit lors que le curseur se déplace à un élément. L'événement mouseover se produit lorsque le curseur se déplace à un élément ou un de ses éléments enfant.
mouseleave vs mouseout
L'élément mouseleave se produit lorsque le curseur déplace hors d'un élément. L'événement mouseout se produit lorsque le curseur déplace hors d'un élément ou un de ses éléments enfant.
L'exemple ci-dessous vous permet de comparer mouseenter vs mouseover, mouseleave vs mouseout :
enter-vs-over-leave-vs-out.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="enter-vs-over-leave-vs-out.js"></script>
<style>
#target-div {
width: 320px;
height: 150px;
background: blue;
}
#target-div > div {
width: 50px;
height: 80px;
margin: 40px 0 0 40px;
padding: 5px 0 0 5px;
float: left;
background: yellow;
}
</style>
</head>
<body>
<h3>mouseenter vs mouseover</h3>
<h3>mouseleave vs mouseout</h3>
<div id="target-div"
onmouseenter="mouseenterHandler(event)"
onmouseover="mouseoverHandler(event)"
onmouseleave="mouseleaveHandler(event)"
onmouseout="mouseoutHandler(event)"
>
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
<h3>Statistics:</h3>
<div style="color:red;" id="statistics-div">
</div>
</body>
</html>
enter-vs-over-leave-vs-out.js
var enterCount = 0;
var overCount = 0;
var leaveCount = 0;
var outCount = 0;
function mouseenterHandler(evt) {
enterCount += 1;
showStatistics();
}
function mouseoverHandler(evt) {
overCount += 1;
showStatistics();
}
function mouseleaveHandler(evt) {
leaveCount += 1;
showStatistics();
}
function mouseoutHandler(evt) {
outCount += 1;
showStatistics();
}
function showStatistics() {
var html =
"enterCount:" + enterCount + "<br/>" //
+
"overCount:" + overCount + "<hr/>" //
+
"leaveCount:" + leaveCount + "<br/>" //
+
"outCount:" + outCount ;
document.getElementById("statistics-div").innerHTML = html;
}
mousemove
mousemove-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="mousemove-example.js"></script>
<style>
#target-div {
width: 320px;
height: 150px;
background: blue;
margin-bottom: 50px;
}
#target-div > div {
width: 50px;
height: 150px;
margin: 40px 0 0 40px;
padding: 5px 0 0 5px;
float: left;
background: yellow;
}
</style>
</head>
<body>
<h3>mousemove example</h3>
<div id="target-div" onmousemove="mousemoveHandler(event)">
<div>Child</div>
<div>Child</div>
<div>Child</div>
</div>
<h3>Statistics:</h3>
<div style="color:red;" id="statistics-div">
</div>
</body>
</html>
mousemove-example.js
var moveCount = 0;
function mousemoveHandler(evt) {
moveCount += 1;
showStatistics();
}
function showStatistics() {
var html = "moveCount:" + moveCount;
document.getElementById("statistics-div").innerHTML = html;
}
MouseEvent est la sous interface de UIEvent, donc elle hérite toutes les propriétés (property) et les méthodes de cette interface.
key
| Propriété | Description |
|---|---|
| altKey | Renvoie true si la touche "ALT" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false. |
| ctrlKey | Renvoie true si la touche "CTRL" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false. |
| shiftKey | Renvoie true si la touche "SHIFT" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false. |
| metaKey | Renvoie true si la touche "META" est appuyée lors du déclenchement de l'événement souris, si non elle renvoie false. |
Exemple de la propriété ctrlKey :
prop-ctrlKey-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<style>
#target-div {
width: 320px;
height: 150px;
background: blue;
margin-bottom: 10px;
}
</style>
<script>
function clickHandler(evt) {
var html = "evt.ctrlKey=" + evt.ctrlKey;
document.getElementById("log-div").innerHTML = html;
}
</script>
</head>
<body>
<h3>Press Ctrl key and Click</h3>
<div id="target-div" onclick="clickHandler(event)" >
</div>
<div style="color:red;" id="log-div">
</div>
</body>
</html>
Position:
| Propriété | Description |
|---|---|
| clientX | Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la fenêtre courante. |
| clientY | Renvoie la coordonnée verticale du pointeur de la souris par rapport à la fenêtre courante. |
| offsetX | Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la position du bord de l'élément cible. |
| offsetY | Renvoie la coordonnée verticale du pointeur de la souris par rapport à la position du bord de l'élément cible. |
| pageX | Renvoie la coordonnée horizontale du pointeur de la souris par rapport au document (page). |
| pageY | Renvoie la coordonnée verticale du pointeur de la souris par rapport au document (page). |
| screenX | Renvoie la coordonnée horizontale du pointeur de la souris, relative à l'écran (Ordinateur ou appareil). |
| screenY | Renvoie la coordonnée verticale du pointeur de la souris, relative à l'écran (Ordinateur ou appareil). |
| movementX | Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la position du dernier événement mousemove. |
| movementY | Renvoie la coordonnée verticale du pointeur de la souris par rapport à la position du dernier événement mousemove. |
prop-positions-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="prop-positions-example.js"></script>
<style>
#target-div {
width: 300px;
height: 210px;
background: #ccc;
margin: 0px 0px 10px 20px;
padding: 5px;
}
</style>
</head>
<body style="height:450px; width:1000px;">
<h3>Positions</h3>
<div id="target-div" onmousemove="mousemoveHandler(event)" >
</div>
</body>
</html>
prop-positions-example.js
function mousemoveHandler(evt) {
var html = "offsetX = " + evt.offsetX +"<br/>"
+ "offsetY = " + evt.offsetY +"<br/>"
+ "clientX = " + evt.clientX +"<br/>"
+ "clientY = " + evt.clientY +"<br/>"
+ "pageX = " + evt.pageX +"<br/>"
+ "pageY = " + evt.pageY +"<br/>"
+ "screenX = " + evt.screenX +"<br/>"
+ "screenY = " + evt.screenY +"<br/>"
+ "movementX = " + evt.movementX +"<br/>"
+ "movementY = " + evt.movementY;
document.getElementById("target-div").innerHTML = html;
}
button
| Propriété | Description |
|---|---|
| button | Renvoie un nombre qui décrit quel bouton de la souris a été pressé lorsque l'événement souris a été déclenché. |
| buttons | Renvoie un nombre qui décrit quel bouton de la souris a été pressé lorsque l'événement souris a été déclenché |
| which | (N’est pas une propriété standard, ne doit pas être utilisé). |
event.button:
- 0: Bouton principal, généralement le bouton gauche ou l'état non initialisé.
- 1: Bouton auxiliaire (Auxiliary button), généralement le bouton de la roue ou le bouton du milieu (s'il y en a).
- 2: Bouton secondaire, généralement le bouton droit.
- 3: Quatrième bouton, généralement le bouton Browser Back.
- 4: Cinquième bouton, généralement le bouton Browser Forward.
event.buttons:
- 0 : Aucun bouton ou non-initialisé.
- 1 : Bouton principal, généralement le bouton gauche.
- 2 : Deuxième bouton, généralement le bouton droit.
- 4 : Bouton auxiliaire (Auxilary button), généralement le bouton de la molette de la souris ou le bouton du milieu.
- 8 : 4ème bouton, généralement le bouton "Browser Back".
- 16 : 5ème bouton, généralement le bouton "Browser Forward".
event.buttons peut renvoyer une valeur différente des valeurs ci-dessus. Par exemple, event.boutons renvoie 3 si vous appuyez à la fois sur la souris gauche et la souris droite en même temps.
prop-button-buttons-example.html
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent Example</title>
<script>
function mousedownHandler(evt) {
var logDiv = document.getElementById("log-div");
logDiv.innerHTML = "event.button= " + evt.button +"<br/>"
+ "event.buttons= "+ evt.buttons;
}
</script>
</head>
<body>
<h3>event.button, event.buttons</h3>
<button onmousedown="mousedownHandler(event)">Click Me!</button>
<br/><br/>
<div id="log-div" style="color:red;"></div>
</body>
</html>
Other properties
| Propriété | Description |
|---|---|
| relatedTarget | Retourne l’élément lié à l’élément qui a déclenché l’événement de la souris |
*
