jQuery Mouse Position with pageX and pageY

Pointer events expose coordinates through the event object. event.pageX is the horizontal position and event.pageY is the vertical position relative to the document.

Coordinate Properties Top ↑

event.pageX
event.pageY

Display the Click Position Top ↑

$( function () {
    $( document ).on( "click", function (event) {
        $( "#t1" ).text(
            "X: " + event.pageX + ", Y: " + event.pageY
        );
    });
});

Open the page-coordinate demo →

For coordinates relative to a particular element, combine the event position with that element's offset. See also the existing element-coordinate demo.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: