MouseEvent pageX Property

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP








googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );




MouseEvent pageX Property



❮ DOM Events
❮ MouseEvent




Example


Output the coordinates of the mouse pointer when the mouse button is clicked
on an element:



var x = event.pageX;     // Get the horizontal coordinate
var y = event.pageY;     // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;

Try it Yourself »

More "Try it Yourself" examples below.



Definition and Usage


The pageX property returns the horizontal coordinate (according to the
document) of the mouse pointer when a mouse event
was triggered.


The document is the web page.


Tip: To get the vertical coordinate (according to the
document) of the mouse pointer,
use the pageY property.


Note: This property is read-only.


Note: This property is non-standard, but works in most major
browsers.



Browser Support














Property
pageX Yes 12.0 Yes Yes Yes






googletag.cmd.push(function() googletag.display('div-gpt-ad-1493883843099-0'); );





Syntax



event.pageX


Technical Details






Return Value:
A Number, representing the horizontal coordinate of the mouse pointer, in pixels
DOM Version: None

More Examples



Example


Output the coordinates of the mouse pointer while the mouse pointer moves
over an element:



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

Try it Yourself »



Example


A demonstration of the differences between pageX and pageY and screenX
and 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;

Try it Yourself »


Related Pages


HTML DOM reference: MouseEvent pageY Property


HTML DOM reference: MouseEvent clientX Property


HTML DOM reference: MouseEvent clientY Property


HTML DOM reference: MouseEvent screenX Property


HTML DOM reference: MouseEvent screenY Property




❮ DOM Events
❮ MouseEvent


Popular posts from this blog

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

Edmonton

Crossroads (UK TV series)