Skip to content

Polyfill to remove click delays on browsers with touch UIs

License

Notifications You must be signed in to change notification settings

iqingting/fastclick

 
 

Repository files navigation

Usage

$ npm install modern-fastclick --save

The script must be loaded prior to instantiating FastClick on any element of the page.

To instantiate FastClick on the body, which is the recommended method of use:

document.addEventListener('DOMContentLoaded', () => {
  new FastClick(document.body)
}, false)

Ignore certain elements with needsclick

Sometimes you need FastClick to ignore certain elements. You can do this easily by adding the needsclick class.

<a class="needsclick">Ignored by FastClick</a>

When it isn't needed

FastClick doesn't attach any listeners on desktop browsers.

Chrome 32+ on Android with width=device-width in the viewport meta tag doesn't have a 300ms delay, therefore listeners aren't attached.

<meta name="viewport" content="width=device-width, initial-scale=1">

Same goes for Chrome on Android (all versions) with user-scalable=no in the viewport meta tag. But be aware that user-scalable=no also disables pinch zooming, which may be an accessibility concern.

If your page work with WKWebView in iOS, you can use the native css touch-action: manipulation; only.(UIWebView doesn't support yet)

About

Polyfill to remove click delays on browsers with touch UIs

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 87.3%
  • TypeScript 12.0%
  • Other 0.7%