Any Touch

👋 Touch gesture library, 1kb~5kb, compatible with PC / mobile
Alternatives To Any Touch
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Free Programming Books Zh_cn102,803
a day ago29gpl-3.0
:books: 免费的计算机编程类中文书籍,欢迎投稿
Storybook79,0117,28921,47616 hours ago1,108September 14, 20222,067mitTypeScript
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
Ionic Framework49,07619,48488017 hours ago420May 06, 2020470mitTypeScript
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Bulma47,19610,3721,3485 days ago60May 08, 2022359mitCSS
Modern CSS framework based on Flexbox
30 Days Of Javascript36,422
a day ago1January 25, 2022254JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too:
Taro33,03126865521 hours ago516September 23, 20221,009otherTypeScript
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。
Sheetjs32,8674,3792,297a month ago170March 24, 2022129apache-2.0JavaScript
📗 SheetJS Spreadsheet Data Toolkit -- New home
Fe Interview23,288
3 months ago5,312mitJavaScript
前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
Nativescript22,5872,6191,1022 days ago1,908September 28, 2021947mitTypeScript
⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❤️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue + SwiftUI, Jetpack Compose, Flutter and you name it compatible.
Table21,6791,7701,1225 days ago217May 16, 2022121mitTypeScript
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Alternatives To Any Touch
Select To Compare

Alternative Project Comparisons

any-touch NPM Version NPM Downloads size-image codecov CircleCI


  • Support PC/Mobile/WeChat applet.
  • 6 gesture recognizers are loaded by default, can also be loaded on demand, core 1kb, full 5kb.
  • No dependencies, not limited to Vue / React / Angular etc...


中文 | English


QR Code




npm i -S any-touch


<script src=""></script>
    console.log(AnyTouch.version); // 2.x.x


⚡ Get Started

🌱 Vue & Directives

🍀 WeChat applet

📐 Load on demand

🌈 Advanced


🍳 Q & A

Get Started

import AnyTouch from 'any-touch';

// monitored element
const el = document.getElementById('box');

// Start monitoring gesture changes on el
const at = new AnyTouch(el);

// The pan event fires when dragging
at.on('pan', (e) => {
    // e contains information such as displacement/velocity/direction

The pan here is called gesture event. e is the event object, which contains data such as "position/speed/zoom/angle",


Each state of the gesture corresponds to an event.

Gesture Name Describe
pan pan Triggered continuously while dragging
panstart drag to start
panmove dragging
panstart Drag to stop (off screen)
panup / pandown / panright / panleft Drag events in different directions
press press Press
press Press release (off screen)
tap tap Click, No problem with 300ms delay
swipe swipe Swipe
swipeup / swipedown / swiperight / swipeleft Swipe in different directions
pinch pinch Zoom
pinchstart Zoom start
pinchmove Zooming
pinchend Zoom ends (off screen)
pinchin Zoom in
pinchout Zoom out
rotate rotate Rotating, include rotatestart and rotatemove and rotateend
rotatestart Start of rotation
rotatemove Rotating
rotateend End of rotation (off screen)

Combining events

You can listen to multiple events through the array, such as listening to panleft and panright at the same time, so that you can listen to "x-axis dragging".

at.on(['panleft', 'panright'], () => {
    console.log('Drag on the x-axis');

🚀 back to directory

🍭 Event

When the event is triggered, data such as "position/speed/zoom/angle" can be obtained.

at.on('pan', (event) => {
    // event contains data such as speed/direction


name type describe
name String Gesture recognizer name, such as: pan/tap/swipe, etc.
type String Event name, such as tap or panstart, etc., is larger than the name field, such as: when the type is panstart or panmove, and the name returns pan
phase String Current touch state: start / move / end / cancel Corresponding: first touch / move on the screen / leave the screen / abnormally leave the "can anyTouch" element
x Number Current contact center x coordinate
y Number Current contact center y coordinate
deltaX Number The x-axis offset distance of the current contact and the previous contact
deltaY Number The y-axis offset distance of the current contact and the previous contact
displacementX Number The x displacement of the current contact and the starting contact (vector)
displacementY Number The y displacement of the current contact and the starting contact (vector)
distanceX Number absolute value of displacementX
distanceY Number absolute value of displacementY
distance Number The distance between the current contact and the starting contact (scalar)
deltaTime Number The difference between the current time and the initial touch time
velocityX Number The moving speed of the contact on the X axis
velocityY Number The moving speed of the contact on the Y axis
direction Number The direction of the front contact and the current contact can be understood as the instantaneous direction
angle Number When multi-touch, the rotation angle between the starting contact and the current contact
deltaAngle Number When multi-touch, the rotation angle between the front contact and the current contact
scale Number When multi-touch, the zoom ratio of the starting touch point and the current touch point
deltaScale Number When multi-touch, the zoom ratio between the previous touch point and the current touch point
maxPointLength Number The maximum number of contacts that have occurred in the current identification cycle
isStart Boolean Whether the current recognition cycle starts, the rule is that it is a cycle from touchstart->touchend, even if there is a multi-touch, if a point leaves, the current round of recognition ends
isEnd Boolean Whether the current recognition cycle is over
target EventTarget The element to which the event is bound
targets EventTarget[] For multiple touches, each target in touches will be stored
currentTarget EventTarget The element that actually triggered the bound event
nativeEvent TouchEvent native event object

🚀 back to directory


If the event function is bound in the vue template, the type of the event object cannot be deduced, so we need to manually annotate it ourselves.

<div @tap="onTap"></div>
// xxx.vue
import type { AnyTouchEvent } from 'any-touch';
function onTap(e: AnyTouchEvent) {
    // It can be correctly deduced that there is an x attribute on e

🚀 back to directory

Popular Reactjs Projects
Popular Vue Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Drag And Drop