any-touch的识别器, 用来识别双击手势, 是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实现的, 所以代码不多, 只是使用beforeEach拦截器.
`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".
完整源码
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;
}
``