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é.

event.layerX

Sommaire

Syntaxe

Exemples

Notes

Étiquettes et contributeurs liés au document