TouchEvent / MouseEvent local position inside div

Question

I've been developing an HTML5 application and now I'm facing quite a difficult problem getting a proper local touch / mouse position inside a target div in a proper coordinate system.

There are many solutions on StackOverflow but the thing is not so easy.

The "classical" solution is to compute a target offset and subtract it from pageX and pageY position. Many people use JQuery offset function but we have found it buggy (1.8.3) on iOS in some situations when the page is scrolled and contains nested zoomed divs.

The situation is event more complicated because there are not only nested zoomed divs (CSS zoom property) but also layers with different CSS transformations (x and y translations).

Finally we have written our own function to compute the local mouse / touch position in a target div (using WebKitCSSMatrix, MSCSSMatrix and others...). It works 'almost' well but still not perfect is some situations - especially when there are nested zoomed divs.

So my question is whether there is some general solution / library to compute a local touch / mouse position inside a target div considering the above described requirements??

Thanks.

Nice day to all...

Is there a particular mouse/touch event you are interested in? pageX and pageY are measured in CSS pixels, so they should not be affected by zooming, CSS pixels are constant through out zooming, if things are working correctly. — nativist.bill.cutting, Jul 30 '13 at 15:25

score 0 · Answer 1 · answered Jul 30 '13 at 15:08

0

On a mouse event you will have 5 property pairs to choose from.

Here is an excellent browser quirks reference that explains the difference:

Here are the 3 they cover in detail

pageX/Y gives the coordinates relative to the element in CSS pixels.
clientX/Y gives the coordinates relative to the viewport in CSS pixels.
screenX/Y gives the coordinates relative to the screen in device pixels.

answered Jul 30 '13 at 15:08

nativist.bill.cutting

1,292
3
11
19

Thanks a lot. It is a very good article. Unfortunately it is not an answer to my original question. – Pavel Stupka Aug 01 '13 at 06:42

score -1 · Answer 2 · answered Sep 01 '16 at 12:52

-1

If you use event.offsetX and event.offsetY, that should do it. (sorry i know its old)

answered Sep 01 '16 at 12:52

carinlynchin

389
1
3
13

There is no offsetX or offsetY in a touch event. – Timmmm Sep 23 '16 at 12:51

TouchEvent / MouseEvent local position inside div

2 Answers2