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...