I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

Preventing the touch events’ default action

Returning false, or calling preventDefault(), in an event handler is supposed to prevent the default action of the event. So if a user clicks a link the link is not followed, if the user scrolls nothing actually happens, etc. Does this work everywhere for the touch events? My latest research gives the details.

I studied touchstart and touchmove for five actions: tap (click), double tap, scroll, pinch-zoom, and touchhold. Also I took a look at the event cascade. It, too, should be cancelled when you prevent the default.

It turns out that theory is sensible, and all major browsers obey theory. Tap, double tap, and touchhold depend only on the touchstart event, and are only prevented when you return false ontouchstart. So is the event cascade. Scroll and pinch-zoom depend on both touchstart and touchmove, and are therefore prevented when you return false on either event.

Of course plenty of browsers, especially minor ones, have problems:

• It is not possible to prevent a pinch-zoom on Android 2 — at least, not on my Samsung and HTC test devices.
• Android 4 ... Let’s put it like this: I added a special Android 4 table to highlight the differences between the various builds. Tap and double tap cannot be prevented on some Android 4s.
• BlackBerry 6 doesn’t allow you to prevent touchhold, and 6 and 7 don’t allow you to prevent pinch-zoom.
• Symbian Belle does not prevent defaults at all.
• Neither does IE, but that may be understandable: the Microsoft model requires you to suppress defaults in CSS by using the -ms-touch-action (de-prefixed for IE11).
• Single tap cannot be prevented in UC 9, while UC 8 requires touchmove instead of merely allowing it in addition to touchstart.
• Firefox Android is unreliable with the scroll and pinch-zoom actions: it prevents the default only up to a point; and after that point it doesn’t any more.

Have fun with the full table.