Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/any86/any-touch
:wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile
https://github.com/any86/any-touch
angular drag finger gesture javascript mouse pan pinch press react rotate swipe tap touch typescript vanilla vue
Last synced: 6 days ago
JSON representation
:wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile
- Host: GitHub
- URL: https://github.com/any86/any-touch
- Owner: any86
- License: mit
- Created: 2018-08-29T06:34:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-24T07:26:40.000Z (12 months ago)
- Last Synced: 2024-10-29T17:53:17.082Z (about 1 month ago)
- Topics: angular, drag, finger, gesture, javascript, mouse, pan, pinch, press, react, rotate, swipe, tap, touch, typescript, vanilla, vue
- Language: TypeScript
- Homepage: https://any86.github.io/any-touch
- Size: 8.43 MB
- Stars: 1,224
- Watchers: 14
- Forks: 120
- Open Issues: 18
-
Metadata Files:
- Readme: README.CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tiny-js - any-touch - gesture,](https://github.com/react-component/gesture) used in ant design system, could be the only react component on the list, but babel-runtime / corejs polyfills hard-wired into the build push the ~2.5 kB size to over 10 kB. (Touch Gestures / Reactive Programming)
- awesome-seeds - any-touch
README
# any-touch [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![size-image]][size-url] [](https://codecov.io/gh/any86/any-touch) [](https://circleci.com/gh/any86/any-touch)
[size-image]: https://badgen.net/bundlephobia/minzip/@any-touch/core
[size-url]: https://bundlephobia.com/result?p=@any-touch/core
[npm-image]: https://badgen.net/npm/v/any-touch
[npm-url]: https://npmjs.org/package/any-touch
[downloads-image]: https://badgen.net/npm/dt/any-touch
[downloads-url]: https://npmjs.org/package/any-touch
- 支持 PC 端 / 移动端 / [微信小程序](docs/wx.CN.md).
- **默认加载6 个手势识别器**, 也可[按需加载](docs/optional.CN.md), 核心**1kb**, 完整**5kb**.
- **无依赖, 不限于 Vue / React / Angular 等...**
## 语言
**中文** | [English](README.CN.md)
## 演示
查看二维码
[简单演示](https://any86.github.io/any-touch)
[衍生产物: any-scroll(虚拟滚动)](https://github.com/any86/any-scroll)
## 安装
```javascript
npm i -S any-touch
```
## CDN
```html
console.log(AnyTouch.version); // 2.x.x
```
## 目录
[⚡ 快速开始](#快速开始)
- [👋 手势事件](#-手势事件)
- [🍭 事件对象](#lollipop-事件对象event)
- [🔹 Typescript](#Typescript)
[🌱 vue&指令](docs/vue.CN.md)
[🍀 微信小程序](docs/wx.CN.md)
[📐 按需加载](docs/optional.CN.md)
[🌈 进阶使用](docs/advanced.CN.md)
- [阻止默认事件](docs/advanced.CN.md#阻止默认事件)
- [双击(doubletap)](https://github.com/any86/any-touch/tree/master/packages/doubletap)
[:bulb: API](docs/API.CN.md)
[🍳 常见问题](docs/question.CN.md)
## 快速开始
```javascript
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`是[事件对象](#lollipop-事件对象event), 其包含"位置/速度/缩放/角度"等数据,
### 👋 手势事件
每个手势的不同状态都对应一个事件.
手势
事件名
说明
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 轴拖拽".
```javascript
at.on(['panleft', 'panright'], () => {
console.log('x轴拖拽');
});
```
[:rocket: 返回目录](#目录)
### :lollipop: 事件对象(event)
事件触发的时候, 可以获取"位置/速度/缩放/角度"等数据.
```javascript
at.on('pan', (event) => {
// 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` | 原生事件对象 |
[:rocket: 返回目录](#目录)
## Typescript
如果在 vue 模板中绑定事件函数, 那么事件对象的类型是没法推导的, 所以需要我们自己手动标注.
```html
```
```typescript
// xxx.vue
import type { AnyTouchEvent } from 'any-touch';
function onTap(e: AnyTouchEvent) {
// 可以正确推导出e上有x属性
console.log(e.x);
}
```
[:rocket: 返回目录](#目录)