event.layerX

Sommario

Restituisce la coordinata orizzontale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

Sintassi

X = event.layerX

X è un valore intero che rappresenta la coordinata X del puntatore del mouse nel momento in cui si è verificato l'evento.

Esempio

<html>
<head>
<title>esempio di pageX/pageY e layerX/layerY</title>

<script type="text/javascript">

function mostraCoordinate(evt){
  var form = document.forms.form_coords;
  var idPadre = evt.target.parentNode.id;
  form.idPadre.value = idPadre;
  form.coordinataXpagina.value = evt.pageX;
  form.coordinataYpagina.value = evt.pageY;
  form.coordinataXlayer.value = evt.layerX;
  form.coordinataYlayer.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="mostraCoordinate(event)">

<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>

<div id="d1">
<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
saranno simili a quelli di pageX e pageY.
</span>
</div>

<div id="d2">
<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
</span>

<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
</div>

<div id="d3">
<form name="form_coordinate">
 Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
 pageX:<input type="text" name="coordinataXpagina" size="7" />  
 pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
 layerX:<input type="text" name="coordinataXlayer" size="7" />  
 layerY:<input type="text" name="coordinataYlayer" size="7" />
</form>
</div>

</body>
</html>

Note

layerX tiene conto di eventuali scorrimenti orizzontali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

Specifiche

DOM level 0. Non è parte di alcuna specifica.