path: root/files/fr/web/api/mouseevent/index.html

---
title: MouseEvent
slug: Web/API/MouseEvent
tags:
  - API
  - DOM
  - Interface
  - Reference
  - Référence(2)
  - Souris
  - évènements
translation_of: Web/API/MouseEvent
---
<p id="Sommaire">{{APIRef("DOM Events")}}</p>

<p>L'interface <strong><code>MouseEvent</code></strong> 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")}}.</p>

<p><code>MouseEvent</code> 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 <code>MouseEvent</code> doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.</p>

<p>Plusieurs événements plus spécifiques sont basés sur <code>MouseEvent</code>, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.</p>

<h2 id="Constructeur">Constructeur</h2>

<dl>
 <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
 <dd>crée un objet <code>MouseEvent</code>.</dd>
</dl>

<h2 id="Propriétés">Propriétés</h2>

<p><em>Cette interface hérite aussi des propriétés de ses parents</em> <em> {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>

<dl>
 <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
 <dd>renvoie <code>true</code> (<em>vrai</em>) si la touche <kbd>alt</kbd> est pressée lorsque l'événement est lancé.</dd>
 <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
 <dd>Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.</dd>
 <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}}</dt>
 <dd>
 <p>Les boutons qui sont pressés alors que l'événement est lancé.</p>
 </dd>
 <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
 <dd>La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
 <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
 <dd>La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
 <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
 <dd>renvoie <code>true</code> si la touche <kbd>ctrl</kbd> est pressée alors que l'événement est lancé.</dd>
 <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
 <dd>renvoie <code>true</code> si la touche <kbd>méta</kbd> est pressée alors que l'événement est lancé.</dd>
 <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
 <dd>La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
 <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
 <dd>La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
 <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
 <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
 <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>La coordonnée en X du pointeur de la souris relative au document entier.</dd>
 <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>La coordonnée en Y du pointeur de la souris relative au document entier.</dd>
 <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
 <dd>renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, <code>null</code> est retourné.</dd>
 <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
 <dd>
 <p>La seconde cible pour l'événement, s'il y en a une.</p>
 </dd>
 <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
 <dd>La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
 <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
 <dd>La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
 <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
 <dd>renvoie <code>true</code> si la touche <kbd>Maj</kbd> est pressée alors que l'événement est lancé.</dd>
 <dt>{{domxref("MouseEvent.which")}} {{readonlyinline}}</dt>
 <dd>Le bouton qui est pressé alors que l'événement est lancé.</dd>
 <dt>MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>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).</dd>
 <dt>MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>Le type d'appareil qui a généré l'événement (une des constantes <code>MOZ_SOURCE_*</code> 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).</dd>
 <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>La quantité de pression appliquée en cliquant.</dd>
 <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
 <dd>Alias pour {{domxref("MouseEvent.clientX")}}.</dd>
 <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
 <dd>Alias pour {{domxref("MouseEvent.clientY")}}.</dd>
</dl>

<h2 id="Constantes"><span style="display: none;"> </span><span style="display: none;"> </span>Constantes</h2>

<dl>
 <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
 <dd>Force minimum nécessaire pour un click normal.</dd>
 <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
 <dd>Force minimum nécessaire pour un click fort.</dd>
</dl>

<h2 id="Les_méthodes">Les méthodes</h2>

<p><em>Cette interface hérite aussi des méthodes de ses parents</em> <em>{{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>

<dl>
 <dt>{{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}}</dt>
 <dd>Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails.</dd>
 <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
 <dd>initialise la valeur de l'<code>MouseEvent</code> créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.</dd>
</dl>

<h2 id="Exemple">Exemple</h2>

<p>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.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">simulateClick</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">var</span> evt <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">MouseEvent</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
    bubbles<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
    cancelable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
    view<span class="punctuation token">:</span> window
  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="keyword token">var</span> cb <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"checkbox"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//élément pour cliquer</span>
  <span class="keyword token">var</span> canceled <span class="operator token">=</span> <span class="operator token">!</span>cb<span class="punctuation token">.</span><span class="function token">dispatchEvent</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="keyword token">if</span><span class="punctuation token">(</span>canceled<span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="comment token">// Un gestionnaire appelé preventDefault</span>
    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
    <span class="comment token">// Aucun des gestionnaires n'est appelé preventDefault</span>
    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"not canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
<span class="punctuation token">}</span>
document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"button"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> simulateClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Checked<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Click me<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>

<p>Cliquez sur le bouton pour voir comment l'exemple fonctionne :</p>

<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Redéfinit <code>MouseEvent</code> de long à double. C'est-à-dire qu'un <code>PointerEvent</code> dont le <code>pointerType</code> est "souris" est un double.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Ajout de la propriété  <code>region</code>  à partir de {{SpecName('DOM3 Events')}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
   <td>{{Spec2('Pointer Lock')}}</td>
   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>movementX</code> et <code>movementY</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>offsetX</code> et <code>offsetY</code>, <code>pageX</code> et <code>pageY</code>, <code>x</code> et <code>y</code>. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme <code>double</code> et non plus <code>long</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur <code>MouseEvent()</code>, de la méthode <code>getModifierState()</code> et de la propriété <code>buttons</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
   <td>{{Spec2('DOM2 Events')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>

<p> </p>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
    {{domxref("MouseEvent.movementY","movementY")}}</td>
   <td>{{CompatChrome(37)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{ CompatSafari(10.1) }}</td>
  </tr>
  <tr>
   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>{{ domxref("MouseEvent.which", "which") }}</td>
   <td>{{CompatChrome(1)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>1.0</td>
   <td>9.0</td>
   <td>5.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
   <td>{{CompatChrome(47)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatGeckoDesktop(15)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
   <td>{{CompatChrome(45)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatGeckoDesktop(11)}}</td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.region")}}</td>
   <td>{{CompatChrome(51)}}<sup>[1]</sup></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatGeckoDesktop(32)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>9</td>
   <td>{{CompatGeckoDesktop(40)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td>
   <td>{{CompatChrome(56)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Nécessite l'activation de l'indicateur <code>ExperimentalCanvasFeatures</code>.</p>

<p> </p>

<h2 id="Voir_aussi">Voir aussi</h2>

<div>Son parent direct : {{domxref("UIEvent")}}.</div>

<p> </p>