In this tutorial, We will learn how to get the x and y positions of an element on a click event?. We will learn to get the x y position of an element with jquery.


Let's learn by example:

<!DOCTYPE html>
<html>
    <head>
        <title>jquery example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <span>see the result in the console</span>
        <img id='image' src='https://dummyimage.com/600x400/000/fff' />
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#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);
            })
        });
    </script>
</html>


Now, You can run your application and see the result.


Thanks, May this example will help you...




Are you facing problems in understanding this article?
You can watch the video. Watch it now