# @any-touch/doubletap

> any-touch的识别器, 用来识别双击手势, 是Tap识别器的一个特例

Latest version **2.2.0** (published 2022-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @any-touch/doubletap
pnpm add @any-touch/doubletap
yarn add @any-touch/doubletap
bun add @any-touch/doubletap
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2022-05-24 |
| First published | 2022-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 6.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | any86 |
| Maintainers | russell-ne |

## Links

- npm: https://www.npmjs.com/package/@any-touch/doubletap
- npm.io page: https://npm.io/package/@any-touch/doubletap

## Dependencies (3)

- [@any-touch/shared](https://npm.io/package/@any-touch/shared.md) ^2.2.0
- [@any-touch/vector](https://npm.io/package/@any-touch/vector.md) ^2.2.0
- [@any-touch/compute](https://npm.io/package/@any-touch/compute.md) ^2.2.0

## Recent versions

- 2.2.0 (latest) — 2022-05-24
- 2.0.3-alpha.0 (next) — 2022-01-18
- 2.1.3 — 2022-05-24
- 2.1.2 — 2022-04-28
- 2.1.1 — 2022-04-08
- 2.1.0 — 2022-04-02
- 2.0.3 — 2022-03-30
- 2.0.3-2.0.3-alpha.1.0 — 2022-03-30
- 2.0.2 — 2022-01-06
- 2.0.2-alpha.1 — 2022-01-06
- 2.0.2-alpha.0 — 2022-01-06

## README

# @any-touch/doubletap
**双击**识别器. 基于[@any-touch/tap](https://github.com/any86/any-touch/tree/master/packages/tap)实现, 是tap的一个特例.

## 安装
```shell
npm i -S @any-touch/doubletap
```

## 快速开始
```javascript
// 只加载tap识别器(拖拽)
import Core from '@any-touch/core';
import doubletap from '@any-touch/doubletap';
const at = new Core(el);
at.use(doubletap)

// 双击
at.on('doubletap', (event) => {
    console.log(event) // 包含点击位置信息
});
```

## 源码解析
因为是基于[@any-touch/tap](https://github.com/any86/any-touch/tree/master/packages/tap)实现的, 所以代码不多, 只是使用[beforeEach拦截器](https://github.com/any86/any-touch/blob/master/docs/API.md#beforeeachhook).
```typescript
export default function (at: Core) {
    at.use(tap, { name: 'doubletap', tapTimes: 2 });
    const doubleTapContext = at.get('doubletap')
    let timeID: number;
    at.beforeEach((type, next) => {
        if ('tap' === type) {
            clearTimeout(timeID);
            timeID = setTimeout(() => {
                if ([STATE.POSSIBLE, STATE.FAILED].includes(doubleTapContext.state)) {
                    next();
                }
            }, 300);
        } else {
            next();
        }
    });
    return doubleTapContext;
}
```

这里只需要多理解一个概念就是STATE(识别器的状态).
|名称|解释|
|---|---|
|POSSIBLE|待识别|
|RECOGNIZED|已识别|
|FAILED|识别失败|


识别流程如下, 每次点击屏幕, STATE是"**POSSIBLE**状态, 识别成功后状态变成"**RECOGNIZED**", 识别失败变成"**FAILED**".

特别解释下"**FAILED**"的发生情况,用doubletap识别器举例, 当2次点击间隔时间过长, doubletap的状态就会变成"**FAILED**", 当第三次点击的时候状态又变回"**POSSIBLE**".

[完整源码](https://github.com/any86/any-touch/blob/master/packages/doubletap/src/index.ts)

## N击
如果看懂了双击的逻辑, 那么稍作修改就可以实现"3击".
```typescript
export default function (at: Core) {
    // ⭐只有这一行的tapTimes改成了3
    at.use(tap, { name: 'doubletap', tapTimes: 3 });

    // 未改动
    const doubleTapContext = at.get('doubletap')
    let timeID: number;
    at.beforeEach((type, next) => {
        if ('tap' === type) {
            clearTimeout(timeID);
            timeID = setTimeout(() => {
                if ([STATE.POSSIBLE, STATE.FAILED].includes(doubleTapContext.state)) {
                    next();
                }
            }, 300);
        } else {
            next();
        }
    });
    return doubleTapContext;
}
```

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