HTML: Translating touch events to relative

[VectraMan]

This is one of those "I can't believe it's this hard" problems.

I need to translate a mouse press or touch on a web page to a div's local coordinates. Any sensible system would do this for you, but that's too simple for the folks behind the HTML standards. After a lot of faffing, I've come up with this (ignoring x for brevity):

function onTouchStart( ev )
{
e = new Object;
e.y = ev.touches[0].pageY;

// translate
r = rootDiv.getBoundingClientRect();
e.y -= r.top;
e.y -= window.scrollY;
}

If I have a DIV that starts 300 pixels down the page and I touch its top left, e.y = 300 and r.top is 300, and so it works. If the window is scrolled down so my div is at the top of the window then r.top is now 0 because it's offset by the scroll position (bizarrely - I don't know why anybody would think that's how it should be) which is why you also need to subtract the scroll position.

This is fine. Until I zoom in on Android (Chrome).

Once zoomed if I scroll so my div is at the top r now doesn't take into account the scroll position, so that r.top is 300 and scrollY is 300 and I therefore end up 300 pixels out.

So how the ***** am I meant to make that work? Is there some alternate strategy?

Any insights?

[DimPrawn]

I suspect you are trying to reinvent the wheel.

Try looking at a library:

Hammer.JS - Hammer.js
QuoJS
Daniel Glyde: TouchIt: jQuery Plugin for Touch events

[VectraMan]

Not really. I'm just trying to use the wheel; it's other people that have implemented it wrong.

Found a bodge. Basically create a DIV at 0,0 and then call its getClientBoundingRect() and measure the distance. Then the error cancels itself out. Phew.