evt.offsetX returns undefined on Safari

Question

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

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 to point 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 an iPad, on touchstart, the feedback shows "mousedown at undefined, undefined." If I replace .offsetX and .offsetY with .pageX and .pageY, then I get actual coordinates. So it seems Safari Mobile does not handle .offsetX and .offsetY, but it does handle .pageX and .pageY.

I know that I can calculate .offsetX from pageX using the source elements position.left property, but I would like to avoid this if possible. SO MY QUESTION IS: is there something wrong in my code or approach, or is .offsetX not handled in Safari Mobile.

Any help greatly appreciated!

score 0 · Answer 1 · answered Oct 08 '12 at 08:59

0

You can use clientX and clientY instead.

answered Oct 08 '12 at 08:59

cuixiping

24,167
8
82
93

score 0 · Answer 2 · answered Jun 06 '14 at 09:56

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...

evt.offsetX returns undefined on Safari

2 Answers2