Retrieve the same X offset on touch as mouse event

Question

Hi, I am trying to get the X, Y offset of the touch, which should be identical to the offsetX of the mouse event. For this, I used this code:

ev.offsetX = ev.targetTouches[0].pageX- canvasName.offsetLeft 

I even tried to simulate a touch event in a mouse event, but for this I need an X / Y offset that is not available in a touch event. Is there a way to offsetX / Y that can be calculated to touch? Please, help

Answer 1

I use this

 var rect = e.target.getBoundingClientRect(); var x = e.targetTouches[0].pageX - rect.left; var y = e.targetTouches[0].pageY - rect.top; 

Answer 2

You should use the clientX / clientY properties of the mouse event (or pageX / pageY ) if you have scrolling on your page.

As for your decision. It can be fixed using getElementById(canvasName).clientX

 ev.offsetX = ev.targetTouches[0].pageX - getElementById(canvasName).clientX 

canvasName.offsetLeft is the offset of the canvasName relative to it parent. Therefore, if you want to use offsetLeft , you should do something like the following

 var left = 0, elem = getElementById(canvasName); while(elem) { left = left + parseInt(elem.offsetLeft); elem = elem.offsetParent; } ev.offsetX = ev.targetTouches[0].pageX - left 

Answer 3

I know this is an old question, but the first in google is "offsetX touch event". I finished this function after the research I did.

 function normalizePosition(evt, parent){ // Simple adoptation var position = {}; position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX; position.y = (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY; while(parent.offsetParent){ position.x -= parent.offsetLeft - parent.scrollLeft; position.y -= parent.offsetTop - parent.scrollTop; parent = parent.offsetParent; } return position; } function normalizePosition(evt, parent, gridSize, offset){ // With some extra stuffs var position = {}; position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX; position.y = (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY; while(parent.offsetParent){ position.x -= parent.offsetLeft - parent.scrollLeft; position.y -= parent.offsetTop - parent.scrollTop; parent = parent.offsetParent; } if(gridSize){ position.x = Math.floor(position.x / gridSize); position.y = Math.floor(position.y / gridSize); } if(offset){ position.x -= offset.x; position.y -= offset.y; } return position; } 

Answer 4

If you use jQuery touch events, the layerX and layerY attributes provide relative x and y but do not take into account the conversion. Therefore, I manually applied the transform, taking the scale values ​​of the transform from CSS.

e = touch event from jQuery

parent = jQuery object of the parent element to which the "transform" is applied. For me it was $(e.target.parentNode);

 const layerX = e.originalEvent.layerX; const layerY = e.originalEvent.layerY; const currentScale = 1 / parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]); const offsetX = layerX * currentScale; const offsetY = layerY * currentScale; 

To make the last two lines compatible with touch and click events:

 const offsetX = e.offsetX || layerX * currentScaleX; const offsetY = e.offsetY || layerY * currentScaleY; 

Link to capture conversion values: Get the conversion css value directly using jquery

If you use Reactjs onClick , then you can get the value of Layerx and layerY with: e.nativeEvent.layerX . For some reason, layerX and layerY are not available in React touch events. If you need to use React onTouchEnd :

 const rect = e.nativeEvent.target.getBoundingClientRect(); const layerX = e.changedTouches[0].clientX - rect.left; const layerY = e.changedTouches[0].clientY - rect.top; const currentScale = 1 / parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]); const offsetX = layerX * currentScale; const offsetY = layerY * currentScale; 

Note. It is better to store conversion values ​​in Redux rather than capturing them using jQuery.

Answer 5

Credits for fooobar.com/questions/11599 / ...

 function recoverOffsetValues(e) { var rect = e.target.getBoundingClientRect(); var bodyRect = document.body.getBoundingClientRect(); var x = e.originalEvent.changedTouches[0].pageX - (rect.left - bodyRect.left); var y = e.originalEvent.changedTouches[0].pageY - (rect.top - bodyRect.top); return [x, y]; }