How to get X and Y position on click event using jQuery

Hariom Prajapati

23 Jun 2022

JQuery

In this tutorial we will see how to get X and Y position on click event using jQuery.

Here we will use jQuery offset to get x y coordinates on mouse click.

<!DOCTYPE html>
<html>

<head>
    <title>Get X and Y position on click event using JQuery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
</head>

<body>
    <img id='teknowize' src='https://dummyimage.com/600x400/000/fff' />
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#teknowize").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);
        })
    });
</script>

</html>

Output

jquery