Evt.offsetX returns undefined in Safari

Question

I am trying to implement a drag / move action on an SVG element using Javascript. I use event handlers such as:

function handleMouseDown(evt) { currentX = evt.offsetX; currentY = evt.offsetY; dX = currentX - Number($(evt.srcElement).attr("x")); dY = currentY - Number($(evt.srcElement).attr("y")); isDragging = true; $info.html("mousedown at " + currentX + ", " + currentY); //feedback for debugging } 

Note that I already have code pointing either mousedown or touchstart to handleMouseDown, depending on whether it is a touch device or not.

On my desktop, the code works fine on IE9, Google, and Safari. However, on the iPad, on touchstart, the feedback shows "mousedown at undefined, undefined". If I replaced .offsetX and .offsetY with .pageX and .pageY, then I will get the actual coordinates. Thus, it seems that Safari Mobile does not process .offsetX and .offsetY, but it does process .pageX and .pageY.

I know that I can compute .offsetX from pageX using the original position.left property, but I would like to avoid this if possible. SO MY QUESTION IS: There is something wrong with my code or approach, or isoffsetX is not processed in Safari Mobile.

Any help is much appreciated!

Answer 1

Instead, you can use clientX and clientY .

Answer 2

Had a similar problem when binding an event handler using the jQuery .on function on a canvas element (I don’t know the reason).

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

Hope this helps ...