Touch gesture library, 1kb~5kb, compatible with PC / mobile
MIT License
中文 | English
npm i -S any-touch
<script src="https://unpkg.com/any-touch/dist/any-touch.umd.min.js"></script>
<script>
console.log(AnyTouch.version); // 2.x.x
</script>
import AnyTouch from 'any-touch';
// 被监视的元素
const el = document.getElementById('box');
// 开始监视el上的手势变化
const at = new AnyTouch(el);
// 当拖拽的时候pan事件触发
at.on('pan', (e) => {
// e包含位移/速度/方向等信息
console.log(e);
});
这里的pan
叫做手势事件. e
是事件对象, 其包含"位置/速度/缩放/角度"等数据,
每个手势的不同状态都对应一个事件.
可以通过数组监听多个事件, 比如同时监听panleft
和panright
, 这样就实现监听"x 轴拖拽".
at.on(['panleft', 'panright'], () => {
console.log('x轴拖拽');
});
事件触发的时候, 可以获取"位置/速度/缩放/角度"等数据.
at.on('pan', (event) => {
// event包含速度/方向等数据
});
名称 | 数据类型 | 说明 |
---|---|---|
name | String |
识别器名, 如:pan/tap/swipe等. |
type | String |
事件名,如 tap/panstart 等,他比name 字段范围大,如:当type 是 panstart 或 panmove, 而name 返回的都是 pan |
phase | String |
当前触碰状态: start | move |end | cancel 对应: 第一下触碰 | 屏幕上移动 | 离开屏幕 | 非正常离开 "可 anyTouch"元素 |
x | Number |
当前触点中心x 坐标 |
y | Number |
当前触点中心y 坐标 |
deltaX | Number |
当前触点和前触点的 x 轴偏移距离 |
deltaY | Number |
当前触点和前触点的 y 轴偏移距离 |
displacementX | Number |
当前触点与起始触点的 x 位移(矢量) |
displacementY | Number |
当前触点与起始触点的 y 位移(矢量) |
distanceX | Number |
displacementX 的绝对值 |
distanceY | Number |
displacementY 的绝对值 |
distance | Number |
当前触点与起始触点的距离(标量) |
deltaTime | Number |
当前时间与起始触碰时间的差值 |
velocityX | Number |
当前 x 轴速度 |
velocityY | Number |
当前 y 轴速度 |
direction | Number |
前触点与当前触点的方向,可以理解为瞬时方向 |
angle | Number |
多点触摸时,起始触点与当前触点的旋转角度 |
deltaAngle | Number |
多点触摸时,前触点与当前触点的旋转角度 |
scale | Number |
多点触摸时,起始触点与当前触点的缩放比例 |
deltaScale | Number |
多点触摸时,前触点与当前触点的缩放比例 |
maxPointLength | Number |
本轮识别周期出现过的最大触点数 |
isStart | Boolean |
是否当前识别周期的开始, 规律为从 touchstart->touchend 即是一个周期, 即便多点触碰, 有一个点离开,本轮识别结束 |
isEnd | Boolean |
是否当前识别周期的结束 |
target | EventTarget |
绑定事件的元素 |
targets | EventTarget[] |
对应多个触点会存储 touches 中的每一个 target |
currentTarget | EventTarget |
实际触发绑定事件的元素 |
nativeEvent | TouchEvent |
原生事件对象 |
如果在 vue 模板中绑定事件函数, 那么事件对象的类型是没法推导的, 所以需要我们自己手动标注.
<div @tap="onTap"></div>
// xxx.vue
import type { AnyTouchEvent } from 'any-touch';
function onTap(e: AnyTouchEvent) {
// 可以正确推导出e上有x属性
console.log(e.x);
}