How can I get e.offsetX on mobile/iPad

问题

There was no offsetX in e.touches[0] when I tried on iPad. Does anyone know where I can get this value of offsetX?

回答1:

You can use clientX or pageX, see here

回答2:

The correct answer based on the comments in the suggested answer:

e.offsetX = e.touches[0].pageX - e.touches[0].target.offsetLeft;     
e.offsetY = e.touches[0].pageY - e.touches[0].target.offsetTop;

This ignores any transformations such as rotations or scaling. Also be sure to check if there are any touches.

回答3:

Thanks, @Kontiki - this is the solution that finally fixed things for me:

if("touchmove" == e.type)
{

    let r = canvas.getBoundingClientRect();
    currX = e.touches[0].clientX - r.left;
    currY = e.touches[0].clientY - r.top;
}
else
{
    currX = e.offsetX;
    currY = e.offsetY;
}

回答4:

The page - offset / client approach did not work for me. There was still an offset. I found this other solution that works perfectly:

let r = canvas.getBoundingClientRect();

let x = e.touches[0].pageX - r.left;
let y = e.touches[0].pageY - r.top;

回答5:

Was having similar issue on binding event-handler using jQuery's .on function on canvas element (Don't know the reason).

I resolved it by binding event-handler using addEventListener. The event object in the handler has offsetX and offsetY defined with proper values.

Hope it helps...

来源：https://stackoverflow.com/questions/11287877/how-can-i-get-e-offsetx-on-mobile-ipad