Mobile Browser TouchEvents

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?

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.