Proprietà pageX dell'oggetto MouseEvent

Eventi DOM MouseEvent

Definizione e uso

Quando un evento del mouse viene attivato, la proprietà pageX restituisce la coordinata orizzontale del puntatore del mouse (relativa al documento).

Il documento è la pagina web.

Suggerimento:Per ottenere la coordinata verticale del puntatore del mouse (relativa al documento), utilizzare Proprietà pageY.

Nota:Questa proprietà è sola lettura.

Nota:Questa proprietà non è standard, ma è applicabile a molti browser principali.

Esempio

Esempio 1

Output delle coordinate del puntatore del mouse quando si clicca sul pulsante del mouse sull'elemento:

var x = event.pageX;     // Ottieni la coordinata orizzontale
var y = event.pageY;     // Ottieni la coordinata verticale
var coor = "X coords: " + x + ", Y coords: " + y;

Prova tu stesso

Esempio 2

Output delle coordinate del puntatore del mouse quando si muove sull'elemento:

var x = event.pageX;
var y = event.pageY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

Prova tu stesso

Esempio 3

Esempio di differenza tra pageX e pageY e tra screenX e screenY:

var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

Prova tu stesso

Sintassi

event.pageX

Dettagli tecnici

Valore di ritorno: Numero, che rappresenta la coordinata orizzontale del puntatore del mouse in pixel.
Versione DOM: Nessuno.

Supporto del browser

Proprietà Chrome IE Firefox Safari Opera
pageX Supporto 12.0 Supporto Supporto Supporto

Pagine correlate

Manuale di riferimento HTML DOM DOM:Proprietà pageY dell'evento MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà clientX dell'evento MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà clientY dell'evento MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà screenX dell'evento MouseEvent

Manuale di riferimento HTML DOM DOM:Proprietà screenY dell'evento MouseEvent

Eventi DOM MouseEvent