How to get X and Y position of an element using jQuery

Hariom Prajapati

20 Jun 2022

JQuery

In this tutorial we will learn that how to get X and Y position of an element on click event using jQuery. Here will use jQuery get X Y coordinate of mouse click.

Using below code we can get X and Y position of an element on click event.

Get X and Y position of an element

<!DOCTYPE html>
<html>

<head>
    <title>X and Y Position of an Element on Click Event</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
</head>

<body>
    <img id='demo_image' src='../x-and-y.png' />
</body>

<script type="text/javascript">
    $(document).ready(function () {
        $("#demo_image").click(function (e) {
            e.preventDefault();
            var offset = $(this).offset();
            var x = e.clientX - offset.left;
            var y = e.clientY - offset.top;
            console.log("X:" + x + " Y:" + y); //view output in console
        })
    });
</script>

</html>