event.layerX
============

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.

Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.

Syntaxe
-------


```js
var posx = event.layerX;
```


* *`posx`* est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.
Exemples
--------


```html
<html>
  <head>
    <title>Exemple pageX\pageY & layerX\layerY</title>

    <script type="text/javascript">
 function montrerCoords(evt) {
 var form = document.forms.form\_coords;
 var parent\_id = evt.target.parentNode.id;
 form.parentId.value = parent\_id;
 form.pageXCoords.value = evt.pageX;
 form.pageYCoords.value = evt.pageY;
 form.layerXCoords.value = evt.layerX;
 form.layerYCoords.value = evt.layerY;
 }
 </script>

    <style type="text/css">
 #d1 {
 border: solid blue 1px;
 padding: 20px;
 }

 #d2 {
 position: absolute;
 top: 180px;
 left: 80%;
 right: auto;
 width: 40%;
 border: solid blue 1px;
 padding: 20px;
 }

 #d3 {
 position: absolute;
 top: 240px;
 left: 20%;
 width: 50%;
 border: solid blue 1px;
 padding: 10px;
 }
 </style>
  </head>

  <body onmousedown="montrerCoords(event)">
    <p>
      Pour afficher les coordonnées de la souris, veuillez cliquer quelque part
      sur la page.
    </p>

    <div id="d1">
      <span
 >Cette div n'est pas positionnée : cliquer dedans renverra des valeurs
        layerX/layerY identiques à celles de pageX/PageY.</span
 >
    </div>

    <div id="d2">
      <span
 >Cette div est positionnée : cliquer dedans renverra des valeurs
        layerX/layerY relatives à son coin supérieur. Notez que les valeurs de
        pageX\pageY sont toujours relatives au document, ce qui inclue le
        défilement dans la page.</span
 >

      <span
 >Un peu de défilement ! C'est un div positionné : le clic renverra des
        valeurs layerX/layerY relative à son coin supérieur gauche. Notez que
        les valeurs de pageX\pageY sont toujours relatives au document, ce qui
        inclue le défilement dans la page.</span
 >
    </div>

    <div id="d3">
      <form name="form\_coords" id="form1">
        Id de l'élément parent :
        <input type="text" name="parentId" size="7" /><br />
        pageX:<input type="text" name="pageXCoords" size="7" /> pageY:<input
 type="text"
 name="pageYCoords"
 size="7" /><br />
        layerX:<input type="text" name="layerXCoords" size="7" /> layerY:<input
 type="text"
 name="layerYCoords"
 size="7" />
      </form>
    </div>
  </body>
</html>
```

Spécifications
--------------

*Cette propriété ne fait partie d'aucune spécification.*

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.