CODEWITHSUNDEEP
javascript
slopes
slopes

Reputation: 5

Capturing X Y Coordinates from Mouse Click (javascript)

I know this is supposed to be ask a question, get an answer (and I think I'm doing that, just not sure on my level of clarity). I've been asked to find a way to capture xy coords from mouse clicks and then store them in a database. What I am wondering is if a person clicks on the same place using a desktop, a tablet, a smartphone, will the resulting xy be the same? I guess the reason I'm asking is it's my hunch that they won't be the same. And if that's the case then how do I accurately map the locations of all mouse clicks at a later date when pulling them from the database. I hope I'm making sense here (not so sure myself).

Thanks all!

Upvotes: 0

Views: 195

Answers (2)

wawa
wawa

Reputation: 5084

When you get the X/Y cords of an click (mousedown or touchdown, what ever) event, they are in pixels from the left and top of the screen.

Since a phone, tablet, laptop and desktop don't have the same resolution, they won't have the same coordinates. What you could do is convert it to %... Let's say you have an image and you want your users to be able to tag someone... then you could just save the coordinates in % like this:

x: 35%, y: 60%

1920x1080 => x: 672px (1920/100*35), y = 648px (1080/100*60)
600x400 => x: 210px (600/100*35), y = 240px (400/100*60)
...

That's what I'd try.

Edit
As @Binoy pointed out, the same X/Y coordinate will be the same on any device. But on a mobile device you might have to scroll, because the point is outside of the viewport. In my answer, I was guessing, that there's some kind of responsive layout (like an image with CSS max-width: 100%) and that the user is clicking on that.

Upvotes: 1

Binu
Binu

Reputation: 20

I don't think that every device will have same xy co ordinates for a particular point for Web page. If that's case every Web should display equally in all devices even without responsive UI design itself. So saving xy coordinate in db from one device will not be ideal case I think but you could do another way like save xy co ordinates along with screen resolution. So same resolution device will have same xy coordinate

Upvotes: 0

Related Questions