查看二维码
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是事件对象, 其包含"位置/速度/缩放/角度"等数据,
每个手势的不同状态都对应一个事件.
| 手势 | 事件名 | 说明 |
| pan | 拖拽时持续触发 | |
| panstart | 拖拽开始 | |
| panmove | 拖拽中 | |
| panstart | 拖拽停止(离开屏幕) | |
| panup / pandown / panright / panleft | 不同方向的拖拽事件 | |
| press | press | 按压 |
| press | 按压释放(离开屏幕) | |
| tap | tap | 点击 |
| swipe | swipe | 快划 |
| swipeup / swipedown / swiperight / swipeleft | 不同方向快划 | |
| pinch | pinch | 缩放 |
| pinchstart | 缩放开始 | |
| pinchmove | 缩放中 | |
| pinchend | 缩放结束(离开屏幕) | |
| pinchin | 放大 | |
| pinchout | 缩小 | |
| rotate | rotate | 旋转 |
| rotatestart | 旋转开始 | |
| rotatemove | 旋转中 | |
| rotateend | 旋转结束(离开屏幕) |
可以通过数组监听多个事件, 比如同时监听panleft和panright, 这样就实现监听"x轴拖拽".
at.on(['panleft','panright'], () => {
console.log('x轴拖拽');
});事件触发的时候, 可以获取"位置/速度/缩放/角度"等数据.
at.on('pan', event=>{
// event包含速度/方向等数据
});| 名称 | 数据类型 | 说明 |
|---|---|---|
| name | String |
识别器名,对应识别器参数的name |
| 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);
}