5

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]);
})
Erik
  • 4,268
  • 5
  • 33
  • 49
  • not sure but its e.pageX,e.pageY on web base jquery – Val Feb 14 '11 at 13:12
  • 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. – Erik Feb 14 '11 at 13:22
  • it should work like every event, so I'd expect e.pageX or e.mouseX to work. – naugtur Feb 14 '11 at 13:31

2 Answers2

3

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.

Stoffe
  • 2,744
  • 2
  • 25
  • 24
  • What's the idea of the touches array? You store the coordinates in there, but how do you retrieve them during the tap event? – David Bulté Nov 03 '11 at 20:53
0

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;
}
elasticrash
  • 1,181
  • 1
  • 12
  • 30