How to get position/coordinates of a tap-event with jquery-mobile?

Question

Jquery-mobile supports these events:

http://jquerymobile.com/demos/1.0a3/docs/api/events.html

How do I get the position of the tap event (for example within an image) on a mobile device?

$('#myimg').bind('tap', function(e){
  var x = ???;
  var y = ???;

  alert([x, y]);
})

Stellite

not sure but its e.pageX,e.pageY on web base jquery – Workingwoman

I know, that's why I asked, it doesn't work ;-) I also checked the jquery-mobile source but haven't discovered how it is supposed to work. I just can't imagine that the coordinates would not be provided in the event. – Stellite

it should work like every event, so I'd expect e.pageX or e.mouseX to work. – Acrolein

Answer 1

The reason why you won't get pageX & pageY is that you get the touchcancel event which does not contain any coordinate information (it's a non-touch, after all). It's not an actual tap or click, it's a touch event that didn't move (over a threshold) and was quick enough.

I encountered the same thing when using the touchswipe plugin for jQuery and had to work around it by storing the coordinate on the touchstart event and retrieving it on the cancel one to be able to extract the coordinates.

You will want to save these ones in the start event ("vmousedown" in jquery mobile?):

  event.touches[0].pageX
  event.touches[0].pageY

Also, on a mobile device, you should multiply the coordinates by window.devicePixelRatio to get the accurate position on the screen.

Tearful

What's the idea of the touches array? You store the coordinates in there, but how do you retrieve them during the tap event? – Icebox

Answer 2

I dont know about Jquery mobile but i just tried a canvas demo page i got in my iphone ...that you just click and draws circles and it works fine.

and i just use e.pageX and e.pageY like the people above said

function getCursorPosition(e) {
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
    x = e.pageX;
    y = e.pageY;
    }
    else {
    x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }
    x -= Ccanvas.offsetLeft;
    y -= Ccanvas.offsetTop;

    var Point = {
        x: x,
        y: y
        };
    return Point;
}

Epa