diff options
Diffstat (limited to 'files/fr/web/api/element/mousemove_event/index.md')
| -rw-r--r-- | files/fr/web/api/element/mousemove_event/index.md | 161 |
1 files changed, 76 insertions, 85 deletions
diff --git a/files/fr/web/api/element/mousemove_event/index.md b/files/fr/web/api/element/mousemove_event/index.md index d848446fb1..6f764d7592 100644 --- a/files/fr/web/api/element/mousemove_event/index.md +++ b/files/fr/web/api/element/mousemove_event/index.md @@ -11,62 +11,68 @@ tags: - mousemove translation_of: Web/API/Element/mousemove_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'évènement <code>mousemove</code> est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.</p> +L'évènement `mousemove` est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément. <table class="properties"> - <tbody> - <tr> - <th scope="row">Se propage/remonte dans le DOM</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété pour la gestion d'évènement</th> - <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Se propage/remonte dans le DOM</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td> + {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, on utilise les évènements <code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code>, <code><a href="/fr/docs/Web/API/Element/mousemove_event">mousemove</a></code> et <code><a href="/fr/docs/Web/API/Element/mouseup_event">mouseup</a></code> pour permettre à l'utilisateur de dessiner sur un <a href="/fr/docs/Web/API/Canvas_API">canevas</a> HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).</p> +Dans l'exemple suivant, on utilise les évènements [`mousedown`](/fr/docs/Web/API/Element/mousedown_event), [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) et [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) pour permettre à l'utilisateur de dessiner sur un [canevas](/fr/docs/Web/API/Canvas_API) HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire). -<p>Lors du chargement de la page, les constantes <code>myPics</code> et <code>context</code> sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante <code>rect</code> permet de stocker les coordonnées relatives du canevas par rapport à la page.</p> +Lors du chargement de la page, les constantes `myPics` et `context` sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante `rect` permet de stocker les coordonnées relatives du canevas par rapport à la page. -<p>Le dessin commence quand l'évènement <code>mousedown</code> est déclenché. On stocke les coordonnées du pointeur dans les variables <code>x</code> et <code>y</code> puis on passe la variable <code>isDrawing</code> à <code>true</code> pour indiquer qu'un dessin est en cours.</p> +Le dessin commence quand l'évènement `mousedown` est déclenché. On stocke les coordonnées du pointeur dans les variables `x` et `y` puis on passe la variable `isDrawing` à `true` pour indiquer qu'un dessin est en cours. -<p>Lorsque le pointeur se déplace sur la page, l'évènement <code>mousemove</code> est déclenché. Si <code>isDrawing</code> vaut <code>true</code>, le gestionnaire d'évènement appelle la fonction <code>drawLine()</code> afin de dessiner une ligne entre le point de coordonnées <code>x</code> et <code>y</code> (stockées dans ces variables) et la position actuelle (N.B. les coordonnées <code>x</code> et <code>y</code> sont "corrigées" avec la constante <code>rect</code> pour tenir compte du décalage entre le canevas et la page).</p> +Lorsque le pointeur se déplace sur la page, l'évènement `mousemove` est déclenché. Si `isDrawing` vaut `true`, le gestionnaire d'évènement appelle la fonction `drawLine()` afin de dessiner une ligne entre le point de coordonnées `x` et `y` (stockées dans ces variables) et la position actuelle (N.B. les coordonnées `x` et `y` sont "corrigées" avec la constante `rect` pour tenir compte du décalage entre le canevas et la page). -<p>Lorsque la fonction <code>drawLine()</code> a fini son exécution, on ajuste les coordonnées courante en les stockant dans <code>x</code> et <code>y</code>.</p> +Lorsque la fonction `drawLine()` a fini son exécution, on ajuste les coordonnées courante en les stockant dans `x` et `y`. -<p>Lorsque l'évènement <code>mouseup</code> est déclenché, on dessine le segment final du dessin en cours, on passe <code>x</code> et <code>y</code> à <code>0</code> puis on arrête le dessin en passant <code>isDrawing</code> à <code>false</code>.</p> +Lorsque l'évènement `mouseup` est déclenché, on dessine le segment final du dessin en cours, on passe `x` et `y` à `0` puis on arrête le dessin en passant `isDrawing` à `false`. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><h1>Dessiner grâce aux évènements de souris</h1> -<canvas id="myPics" width="560" height="360"></canvas> -</pre> +```html +<h1>Dessiner grâce aux évènements de souris</h1> +<canvas id="myPics" width="560" height="360"></canvas> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">canvas { +```css +canvas { border: 1px solid black; width: 560px; height: 360px; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de +```js +// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de // la souris entraîne un dessin sur le canevas let isDrawing = false; let x = 0; @@ -81,13 +87,13 @@ const rect = myPics.getBoundingClientRect(); // On ajoute les gestionnaires d'évènements pour mousedown, mousemove // et mouseup -myPics.addEventListener('mousedown', e => { +myPics.addEventListener('mousedown', e => { x = e.clientX - rect.left; y = e.clientY - rect.top; isDrawing = true; }); -myPics.addEventListener('mousemove', e => { +myPics.addEventListener('mousemove', e => { if (isDrawing === true) { drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top); x = e.clientX - rect.left; @@ -95,7 +101,7 @@ myPics.addEventListener('mousemove', e => { } }); -window.addEventListener('mouseup', e => { +window.addEventListener('mouseup', e => { if (isDrawing === true) { drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top); x = 0; @@ -112,50 +118,35 @@ function drawLine(context, x1, y1, x2, y2) { context.lineTo(x2, y2); context.stroke(); context.closePath(); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples", 640, 450)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 640, 450)}} + +## Spécifications + +| Spécification | État | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.mousemove_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Element.mousemove_event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li> - <li>D'autres évènements connexes - <ul> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - </ul> - </li> -</ul> + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) |