ItSolutionStuff.com

JQuery - How to Get X and Y Position of an Element on Click Event?

By Hardik Savani • February 9, 2021
jQuery

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.

Let's see image example with preview:

Preview:

index.html

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

I hope it can help you...

Tags: jQuery
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

JQuery Moment Subtract Minutes to Datetime Example

Read Now →

Jquery Input Mask Phone Number Validation Example

Read Now →

JQuery - How to Count Child Elements in Div?

Read Now →

Codeigniter Add/Remove Multiple Input Fields Dynamically using JQuery

Read Now →

How to Call AngularJS Controller Function in JQuery?

Read Now →

How to Disable Right Click Menu using JQuery?

Read Now →

Check and Uncheck All Checkbox using JQuery Example

Read Now →

How to access PHP variables in JQuery?

Read Now →

How to Allow Only One Checkbox Checked at a Time in JQuery?

Read Now →

How to Convert Line Breaks to br in jQuery ?

Read Now →

How to Check Object is Empty or Not in JQuery?

Read Now →