Can't get coordinates of touchevents in Javascript on Android devices

Question

I'm testing the HTML5 canvas and using Javascript to draw for touch enabled devices. While I have it working in iOS devices I cannot get it to work on Android. I have narrowed it down to event.pageX not returning the coordinates, but instead either returning 0, or undefined (based on the Browser).

I've tested it on my phone running Cyanogen 7.1 in Opera Mobile and Dolphin browser, and also on a Galaxy Tab 10.1 (Android 3.1) running the standard browser.

I've modified the code to show an alert on a touchstart event displaying the event.pageX, event.layerX and event.clientX coordinates (I'm aware that clientX should only work on iOS).

canvas.addEventListener('touchstart', function(e) {
if (readyToDraw){
    alert("PageX: "+e.pageX+","+e.pageY+"\n LayerX: "+e.layerX+","+e.layerY+"\n + clientX: "+e.clientX+","+e.clientY);
    // prevent the browsers default action!
    e.preventDefault();
    paint = true;
    // Get coordinates
    var c = getCoords(e);
    addClick(c.x, c.y, false);
}
});

I've got the full drawing working in iOS but can't even get Android to register the coordinates, any ideas?

FINAL EDIT: I solved the issue, see the accepted answer.

See [this](http://stackoverflow.com/questions/6099268/does-html5-support-touch-on-mobile-phones). If you still can't get it to work, I guess that phoneGap would work. — toto2, Mar 06 '12 at 15:32
@Stu Nice it's working. Could you make an answer from your edit so this question leave the "unanswered questions" tab. :) Thanks! — miguel-svq, Jun 08 '14 at 18:42

score 69 · Accepted Answer · answered Jun 10 '14 at 13:09

69

FINAL EDIT: Ok I got it working, if anyone finds this and has a similar problem you need to access the touch array within the event, and if just using a single touch (rather than multi touch) take the first item out of the array, as below, or you may need to offset it if that isn't accurate:

var touch = event.touches[0];
var x = touch.pageX;
var y = touch.pageY;
// or taking offset into consideration
var x_2 = touch.pageX - canvas.offsetLeft;
var y_2 = touch.pageY - canvas.offsetTop;

answered Jun 10 '14 at 13:09

Stuart Lacy

1,963
2
18
30

7

For jQuery users that end up here, use `event.originalEvent.touches[0]` instead... – Shikkediel Dec 25 '16 at 10:02
You saved my life. I tried to find the error for hours in a cordova app. Finally I can release it on all platforms. – kaiserkiwi Jun 22 '17 at 09:40

score 1 · Answer 2 · answered Sep 11 '17 at 11:43

1

Didn't work for me (in iScroll 5 context). Used changedTouches[0] instead, as proposed in mouse click event.pagex is NaN in mobile chrome browser (v30.0.1599.92).

answered Sep 11 '17 at 11:43

Sebastiaan Ordelman

932
9
20

Can't get coordinates of touchevents in Javascript on Android devices

2 Answers2

Linked