Question

Is there a way to get touch events to be relative to the element and not the view port or the entire page?

I have the code,

var c = document.createElement("canvas");
c.width = 100;
c.height = 100;
c.addEventListener('touchmove',function(e){
    de.innerHTML = e.targetTouches[0].clientX + ", " + e.targetTouches[0].clientY;
}, false);

de being just a div to output data to, but clientX and clientY are not relative to the element. Is there any way to achieve this?

Answer 1

You can’t be relative to the element, you can be relative to:

• The Viewport (clientX,clientY as you used).
• The screen, it handles zooming (screenX…)
• The page, it handles scrolling (pageX…)

For further info read the useful mobile safari reference guide, and/or Sitepen’s article on this topic.
Hope this helps.