How to Get X and Y Position on Click Event?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hello Dev
Welcome back with a new tutorial. If you need to know about how to get x y position of any element with jquery. If you want to learn jquery get x y position on mouse click. You can get a good understand and good concept of how to get x and y coordinates of an element in jquery. Now we will use jquery to get x y coordinates of mouse click.

Let’s start example

<!DOCTYPE html>
<html>
<head>
    <title>jquery example - ItSolutionStuff.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>

Read Also : Angular Bubble Chart Example Tutorial

I hope it can help you… Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →

Leave a Reply

Your email address will not be published. Required fields are marked *

15 − 15 =