JQuery - How To Get X And Y Position Of An Element On Click Event?

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.

TAGS
jQuery

4.5/5.0
Last updated 08 September, 2022
By Admin

Here, i will give you very simple example with list of colors checkboses and you must have to select at least one color from list, if you do not select then it will give you validation alert.

Let's see image example with preview.

Preview:

index.html

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

I hope it can help you...

JS

jQuery

JQuery - How To Get X And Y Position Of An Element On Click Event?

Preview:

index.html

Categories

Popular Tags