Name: hammer-time
Owner: Hammer.js
Description: A fast click based on the touch-action css property
Created: 2015-07-27 16:04:26.0
Updated: 2018-05-23 11:40:35.0
Pushed: 2018-02-06 04:52:36.0
Homepage: null
Size: 41
Language: HTML
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Keeping visual response to under 100ms means your users will not notice the delay. The UI will feel quick and responsive giving users the impression they are doing the work instead of the application. Try the boxes below to see the response time on mobile devices.
The first box uses touch-action:none;
to remove the 300ms delay. The second box has no touch-action
property set. On touch screens you will see a noticeable difference in the response time of the background and in the outputting of the end vs click events.
The touch-action
css property is part of the Pointer Events spec http://www.w3.org/TR/pointerevents/#the-touch-action-css-property
Unfortunately not all common browsers support touch action yet ( caniuse ) so hammer-time works by partially polyfills this property. The only supported value is none
, manipulation
, or auto
addEventListener
touch-action
touchend
and click
eventselement.style[ touch-action ]
browsers that do not support touch action will ignore thistouch-action
and -ms-touch-action
To read more about UI response times and how this effects user experience see http://www.nngroup.com/articles/response-times-3-important-limits/