JQuery - How to Get X and Y Position of an Element on Click Event?

jQuery

Feb 23, 2021

Hi Dev,

In this blog, I will show you how to get x and y position of an element on click event?. We will learn get x y position of an element with jquery.

If you need to see example of how to get x y position of an element with jquery. you will learn jquery get x y position mouse click. you can understand a concept of how to get x and y coordinates of an element in jquery. We will use jquery get x y coordinates of mouse click.

Example

<!DOCTYPE html>
<html>
<head>
    <title>jquery example - NiceSnippets.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
</head>
<body>
    <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>

It will help you....