Sommario
Restituisce la coordinata orizzontale dell'evento, all'interno dell'intero documento.
Sintassi
X =event.pageX;
X è un intero che rappresenta il valore in pixel della coordinata X del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento orizzontale che è stato effettuato all'interno del browser.
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>
Specifiche
Non è parte di alcuno standard.