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]);
})

Solution

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.