# @quasar/fastclick

> Polyfill used by Quasar Framework to remove click delays on browsers with touch UIs

Latest version **1.1.5** (published 2022-02-26) · 0 weekly downloads

## Install

```sh
npm install @quasar/fastclick
pnpm add @quasar/fastclick
yarn add @quasar/fastclick
bun add @quasar/fastclick
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2022-02-26 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27213 |
| Author | Rowan Beentje |
| Maintainers | rstoenescu, hawkeye64, pdanpdan, webnoob, smolinari, ilcallo |
| Keywords | quasar, quasarframework, fastclick, mobile, touch, tap, click, delay |

## Links

- npm: https://www.npmjs.com/package/@quasar/fastclick
- Repository: https://github.com/quasarframework/quasar
- Homepage: https://quasar.dev
- Issues: https://github.com/quasarframework/quasar/issues
- Funding: https://donate.quasar.dev
- npm.io page: https://npm.io/package/@quasar/fastclick

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.1.5 (latest) — 2022-02-26
- 1.1.4 — 2019-09-30
- 1.1.3 — 2019-08-16
- 1.1.2 — 2019-08-16
- 1.1.1 — 2019-08-14
- 1.1.0 — 2019-08-14
- 1.0.0 — 2019-08-14

## README

![Quasar Framework logo](https://cdn.quasar.dev/logo-v2/header.png)

# Fastclick for Quasar Framework
> This is a fork of the original Fastclick and is being used and maintained by Quasar Framework.<br>
> **This is injected only for iOS platform (PWA or Cordova) and assumes you're already on that platform.**

<img src="https://img.shields.io/npm/v/%40quasar/fastclick.svg?label=@quasar/fastclick">

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a `click` event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

## Compatibility ##

* iOS 7+ platform, on a Quasar PWA or Quasar Cordova

## Usage ##

```js
import Fastclick from '@quasar/fastclick'
FastClick()
```

## Advanced ##

### Ignore certain elements with `needsclick` ###

Sometimes you need FastClick to ignore certain elements. You can do this easily by adding the `needsclick` class.
```html
<a class="needsclick">Ignored by FastClick</a>
```

#### Use case 1: non-synthetic click required ####

Internally, FastClick uses `document.createEvent` to fire a synthetic `click` event as soon as `touchend` is fired by the browser. It then suppresses the additional `click` event created by the browser after that. In some cases, the non-synthetic `click` event created by the browser is required, as described in the [triggering focus example](http://ftlabs.github.com/fastclick/examples/focus.html).

This is where the `needsclick` class comes in. Add the class to any element that requires a non-synthetic click.

#### Use case 2: Twitter Bootstrap 2.2.2 dropdowns ####

Another example of when to use the `needsclick` class is with dropdowns in Twitter Bootstrap 2.2.2. Bootstrap add its own `touchstart` listener for dropdowns, so you want to tell FastClick to ignore those. If you don't, touch devices will automatically close the dropdown as soon as it is clicked, because both FastClick and Bootstrap execute the synthetic click, one opens the dropdown, the second closes it immediately after.

```html
<a class="dropdown-toggle needsclick" data-toggle="dropdown">Dropdown</a>
```

## Examples ##

FastClick is designed to cope with many different browser oddities. Here are some examples to illustrate this:

* [basic use](http://ftlabs.github.com/fastclick/examples/layer.html) showing the increase in perceived responsiveness
* [triggering focus](http://ftlabs.github.com/fastclick/examples/focus.html) on an input element from a `click` handler
* [input element](http://ftlabs.github.com/fastclick/examples/input.html) which never receives clicks but gets fast focus

## Credits and collaboration ##

The forked Fastclick is maintained by [Razvan Stoenescu](https://github.com/rstoenescu). Original contributors: [Rowan Beentje](http://twitter.com/rowanbeentje), [Matthew Caruana Galizia](http://twitter.com/mcaruanagalizia) and [Matthew Andrews](http://twitter.com/andrewsmatt) at [FT Labs](http://labs.ft.com). All open source code released by FT Labs is licensed under the MIT license. We welcome comments, feedback and suggestions.  Please feel free to raise an issue or pull request.

---
_Source: https://npm.io/package/@quasar/fastclick · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._