How to get X and Y position of an element on click event using jQuery?
In this tutorial we will learn that how to get X and Y position of an element on click event using jQuery. Here will use jQuery get X Y coordinate of mouse click.
Using below code we can get X and Y position of an element on click event.
1) Get X and Y position of an element
<!DOCTYPE html>
<html>
<head>
<title>X and Y Position of an Element on Click Event</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
</head>
<body>
<img id='demo_image' src='../x-and-y.png' />
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#demo_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); //view output in console
})
});
</script>
</html>
Output
-min.jpeg "web development, technology, blog")
.jpeg "web development, technology, blog")
