Capturing X Y Coordinates from Mouse Click (javascript)

Question

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!

sounds like you not only want to record x,y of mouse, but also user agent of browser ;) — RenaissanceProgrammer
– RenaissanceProgrammer, Commented Mar 31, 2015 at 21:45

wawa · Accepted Answer · 2015-03-31 22:04:58Z

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.

Binu · Accepted Answer · 2015-03-31 21:54:08Z

0

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

answered Mar 31, 2015 at 21:54

Binu

201 silver badge5 bronze badges

3 Comments

wawa Over a year ago

Actually that's true. In my answer I just guessed, that there's some kind of responsive design or so used. I'll add your point to if that's fine for you.

slopes Over a year ago

Thanks for all the comments so far. It is sounding like this is going to be more of a complex issue to tackle. With a smartphone for example I am assuming that the x,y will max out with the total page size and that whether your are scrolling up or down won't have an impact on what the x,y is? Thanks again

slopes Over a year ago

Thanks everyone for helping on my quasi question :). I've got to give this some more thought as to whether or not it's worth while continuing researching.

Collectives™ on Stack Overflow

Capturing X Y Coordinates from Mouse Click (javascript)

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related