Tip of the Day: Mobile Touch Events

I recently got into a project that was a bit over my head. I had to build out a map that will work on desktop, mobile and tablets the same, but I quickly ran into issues tracking touch events in mobile Safari. All of the testing I was doing in iOS5 (beta) was working the exact same way as the browser, where I could monitor a click and drag (touchmove) event and get the properties pageX and pageY directly from the event. However, on other mobile browsers (specifically iOS4 and older) this property was returning 0 everytime. I then found that multi-touch events store each finger press so I had to get the array of fingers and return the page coordinates. Long story short, here is the code I ended up implementing:

document.ontouchstart = function (e) {
	if (e.touches.length == 1) { // Only deal with one finger
		var touch = e.touches[0], // Get information for finger #1
		    x = touch.pageX,
		    y = touch.pageY;
	}
}

Further Reading on Mobile Touch Events in Javascript

• iPhone Gesturing Explained