CODEWITHSUNDEEP
javascriptandroidtouch-event
Stuart Lacy
Stuart Lacy

Reputation: 2003

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

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.

Upvotes: 43

Views: 30795

Answers (2)

Sebastiaan Ordelman
Sebastiaan Ordelman

Reputation: 942

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

Upvotes: 1

Stuart Lacy
Stuart Lacy

Reputation: 2003

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;

Upvotes: 71

Related Questions