How to get X and Y position on click event using jQuery

 

In this tutorial we will see how to get X and Y position on click event using jQuery.


Here we will use jQuery offset to get x y coordinates on mouse click.


<!DOCTYPE html>

<html>

<head>

    <title>Get X and Y position on click event using JQuery</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>

</head>

<body>

<img id='teknowize' src='https://dummyimage.com/600x400/000/fff' />

</body>

<script type="text/javascript">

$(document).ready(function() {

    $("#teknowize").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>


Output


Related Topics