mozilla
Vos résultats de recherche

    event.layerX

    Sommaire

    Renvoie la coordonnée horizontale de l'évènement, relative à la couche (layer) courante.

    Syntaxe

    event.layerX

    Exemples

    var Xpos = event.layerX;
    
    • Xpos est une valeur entière en pixel pour l'abscisse de la souris (coordonnée X), lorsque l'évènement souris est déclenché.
    <html>
    <head>
    <title>Example pageX\pageY & layerX\layerY</title>
    
    <script type="text/javascript">
    
    function showCoords(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="showCoords(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. Noalues that are relative to the top-left
    corner of this positioned element. 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>
    

    Notes

    layerX prend en compte le défillement dans la page, et renvoie une valeur relative à l'ensemble du document, à moins que l'évènement ne soit déclenché dans un élément positionné. Dans ce cas, la valeur est relative au coin supérieur gauche de l'élément positionné.

    Étiquettes et contributeurs liés au document

    Contributors to this page: khalid32, Feugy, fscholz
    Dernière mise à jour par : khalid32,