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