Different ways to trigger Touchcancel in mobile browsers

The touchcancel event is a often neglected when building touch–interfaces using JavaScript. Historically, browsers vendors has never really published documentation detailing the circumstances as to if this event Gets fired, and hence it has always been been associated with a level of obscurity by many developers. The aim of this post was to try and shed some light on the matter.

Apple originally created touch events for IOS Safari, which has since been adopted as a basis for the website touch events Sp Ecification. The Originalsafari DOM Additions Reference documentation provides very little information on Touchcancel:

Sent when the system cancels tracking for the touch.

Thankfully, the website Touch Events specification gives us a bit more detail, including some situations where the event Shoul D occur:

A User Agent must dispatch this event type to indicate when A touch point have been disrupted in an Implem entation-specific manner, such as a synchronous event or action originating from the UA canceling the touch, or the touch Point leaving the document window to a non-document area which is capable of handling user interactions. (e.g. the UA ' s native user interface, plug-ins) A User Agent may also dispatch this event type when the user places more touch points on the touch surface than the device Or implementation is configured to store, in which case the earliest Touch object in the touchlist should be removed.

From this description we can begin the understand Touchcancel with regard to browser behaviour a little better. It isn't only helps the browser keep accurate references to active Touch objects TouchList in the, but it can also is used by de Velopers to carry out UI specific tasks, such as reseting any variables used during touchstart or touchmove . In the event the the system cancels tracking touchend and the event does not fire, Touchcancel saves the day.

But when does browsers actually trigger this event? To start investigating, it is necessary to build a simple event logger to track all touch events. The test features a touch-area and logs the last touch event fired, making it easier to see exactly what kind of interacti ONS result in a touchcancel.

What follows are a list of findings for various mobile web browsers. It is interesting to note that Touchcancel are not very predictable, especially on Android (2.3.5). But even on iOS5 you cannot always correctly guess what would trigger a touchcancel.

IOS Safari 5.0.1 (iPhone 4 & IPad 1)

Actions this do trigger touchcancel during a Touchstart or Touchmove event:

• User presses the home button.
• User presses the action button in Safari ' s bottom toolbar.
• User Presses/smears The palm of their hand on the screens, creating no discernible single touch points (IPhone only?).
• User presses the lock button.
• User initiates a gesture using four or more simultaneous touch points on iPad and multitasking gestures is enabled in SYS TEM preferences.

Actions that does not trigger touchcancel during a Touchstart or Touchmove event:

• User presses the bookmark button in Safari ' s bottom toolbar.
• User presses the back or forward history buttons in Safari ' s bottom toolbar.
• User taps to focus on the Safari search bar.
• User rotate ' s the device orientation.
• Popup notification such as WiFi Locator or Clock timer alert appears on screen.
• New iOS5 style notification appears at top of the screen.
• User opens a new tab (IPAD).
• User refreshes the page.
• User presses the volume buttons.
• User switches the device onto silent/vibrate.
• User receives a phone call.

In some of these circumstances the browser would simply fire a touchend instead of touchcancel. In others situations (such as the Old–style popup notifications), Touchstart or touchmove would remain active (even while T He content is hidden underneath the notification), until the user releases their finger in which point touchend is fired.

Notable iOS5 system functions that would not activate during a Touchstart or Touchmove event:

• User cannot focus on the Safari address bar.
• User cannot open a new page (IPhone).
• User cannot double–tap the home button to open the app tray.
• User cannot swipe down from the top of screens to open notification Centre.
• User cannot tap on a new IOS5 style notification when it appears at the top of the.

Android 2.3.5 (Samsung Galaxy Y gt-s5363) Stock Browser

Actions this do trigger touchcancel during a Touchstart or Touchmove event:

• User presses the lock button.
• Appears to fire randomly for no immediately obvious reason. This was especially noticeable when performing repeated quick taps and swipes.

Actions that does not trigger touchcancel during a Touchstart or Touchmove event:

• User presses the home button.
• User rotate ' s the device orientation.
• User presses the volume buttons.

Notable Android 2.3.5 system functions that would not activate during a Touchstart or Touchmove event:

• User cannot press the menu or Back buttons.
• User cannot open notifications menu.
• User cannot focus on the browser address bar.
• User cannot tap the bookmarks button.

Opera Mobile

Opera Mobile 11.50 For Android is also tested. While the browser appears to has support for touchcancel, it does not actually seem to fire the event. In the case of pressing the home button for example, Opera Mobile appears to immediately fire touchend instead.

BlackBerry Playbook (1.0.8.6067)

Even though the browser reportedly supports the Touchcancel event, it does not appear to get fired at all. Even when pressing the power button to put the device on standby, Touchcancel are not fired. The same goes for pressing browser tool bar buttons, or focusing on the address bar. It is also worth noting if performing a touchstart or Touchmove, the Playbook does not respond to any bevel swipe g Estures.

Conclusion

It's appears from the tests, which Touchcancel is still a bit unpredictable. While it's easy enough to identify situations where it gets fired, there be often near identical situations where it doe s not. While the usefulness of this event are by no means in question, it seems like developers cannot yet rely on this event Gett ING fired in all expected circumstances.

What are clear though, is so you cannot rely on touchend getting fired on every device. You need to write code, deals with Touchcancel. This is especially true to the IPad for example, say if you ' re building a Multi–touch app or Multi–player HTML5 game. Since there is no-the-telling if the user has enabled multitasking gestures, your apps needs to handle Touchcancel grace Fully. The unpredictable nature of Android browser also demonstrates the importance of dealing with this event, as failure to do So would likely cause bugs in your UI.

So, next time you ' re writing your own touch events, and don ' t forget about touchcancel. Despite the varying levels of browser, it still comes in very handy while dealing with certain unexpected user inte Ractions.

Different ways to trigger Touchcancel in mobile browsers