any86 / any-touch

:wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile

any-touch

• 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...

Language

中文 | English

Demo

QR Code

Simple

any-scroll

Install

npm i -S any-touch

CDN

<script src="https://unpkg.com/any-touch/dist/any-touch.umd.min.js"></script>
<script>
    console.log(AnyTouch.version); // 2.x.x
</script>

Directory

⚡ Get Started

• 👋 Gesture

• 🍭 Event

• 🔹 Typescript

🌱 Vue & Directives

🍀 WeChat applet

📐 Load on demand

🌈 Advanced

• prevenDefault
• doubletap

💡 API

🍳 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
    console.log(e);
});

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

👋Gesture

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
});

event

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

Typescript

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
    console.log(e.x);
}

🚀 back to directory

any-touch's Issues

panend在移动端不触发

panend在桌面端可以正常触发，但是在h5中无法触发

慢速拖动时 panend 有很大几率不触发

非常棒的手势库，感谢开发者。
我这边的场景是拖动滑块，用户滑动距离不超过某个值时就松手时，让滑块复位。
我这边用 isEnd 判断是否松手。
测试发现慢速拖动时松手后捕捉不到 isEnd 为 true 的事件，专门监听了 panend 发现也没有触发。
官方示例可复现。

嵌套的元素拖动时会相互影响

<A>
  <B></B>
</A>

拖动A时，B不会动，但是拖动B时，A会跟着动，如何在操作B时，不会将拖动事件穿透到A上？

swipe 很难触发

相对hammer的swipe，any-touch的swipe很难触发

【BUG】Vue3 中指令方式设置参数没效果

tapTimes 设置了 3，但点击 1 次还是触发了 tap

编译的问题

你这里不用babel编译的吗？
假如用到promise，怎么polyfill

文档错误

没有 this.on，只有 this.$on 或 this.$once

[BUG] @panright事件长按向右拖动松开后会触发一次@panleft事件

文档没有说明 pan 事件怎么判断是否已结束

pan 事件怎么区分 start move end 呢？文档没说明噢~

【BUG】Vue3 press 按压事件不触发

目标设备可能是PC设备, 但是是触屏设备, 比如收银机/超极本, 所以Mouse/Touch事件都作为默认事件被绑定监听

参考

https://www.html5rocks.com/en/mobile/touchandmouse/

可以在canvas上使用吗？

可以在canvas上使用吗，用的是pixi引擎

[BUG] vue3 绑定@pan事件长按拖动松开后会触发多一次

原生js如何使用

如题

想咨询一下，事件绑定后需要手动销毁吗？

作者您好，通过on监听后，事件有销毁机制吗？还是需要手动怎么销毁一下？

要是有doubletap 双击事件就好了

要是有doubletap 双击事件就好了

ios iphone上面的瀏覽器在scrolling的時候touch沒有反應

即係當在html入面有一個長頁面，假設像ios apps一樣左上角有個menu button，但scrolling滾動時按這個button它沒有觸動touch的反應，這個情況只是在iphone的瀏覽器web browser上面發生，例如iphone上的safari和chrome都是一樣發生這個問題

求助一个事情

作者您好，我现在有个急需求，需要参考一下官方的这个实现。可以给我发一下这个demo的代码吗？

pan 事件支持触发的间隔吗？比如：移动指定的像素才触发一次

vue3指令版的doubletap无效

<script setup>
  const tap= () => {
    // 成功
    console.log('tap')
  }

  const doubletap = () => {
    // 失败
    console.log('doubletap')
  }
</script>

<template>
  <div v-touch @tap="tap" @doubletap="doubletap">test</div>
</template>

移动端无法滚动

使用 preventDefault: false 可以让移动端滚动，不过移动端 tap 需要长按（0.5s左右）才能触发，换成 click 正常，并且 pan 会触发滚动条的滚动。
如果去掉 preventDefault：false tap 正常，不过移动端没饭滚动，click 也无效，换成 tap 以后正常。

我想问一下有没有什么比较好的办法能够在不使用 preventDefault: false 的情况下让滚动条能够正常滚动。我现在是在 pan 事件里面修改 scrollTop，不过这样滚动没有加速度，很不流畅。

代码就差不多下面这个形式，左侧的滚动条在移动端下无法滚动（在不使用 preventDefault: false 的情况下）。

<script lang="ts" setup>
const el = document.getElementById('point-list')
const at = new AnyTouch(el)

onMounted(() => {
  at.on('pan', (e) => {
    
  })
  
  at.on('panend', (e) => {
    
  })
})
</script>
<div id="point-list" class="list">
    <div class="item" v-for="(point, index) in pointList" :key="index" @tap="toggleSelection(index)">{{point.name}}</div>
</div>

基于any-touch手势库封装的Vue(2 & 3)的指令

https://github.com/MaybeQHL/v-touchshow

@any-touch/pan 怎么动态设置 pointLength 呢

使用场景是画笔在画布上画画，画笔未激活时用户可以用单指移动画布，但是画笔激活时，单指移动就是画画了。此时双指移动才是移动画布。

问一个关于两指doubleclick的问题，我这个没有生效

Core.use(Tap,{name:'twoFingersTap',tapTimes:2,pointLength:2});
const at = new Core(targetDOM);
at.on('twoFingersTap', (ev) => {
console.log(ev)
// ev包含位置/速度/方向等信息
});

input事件返回手势名

at.on('input' ,e=>{
e.type
})

绑定 Swipe 事件的元素中包含可滚动元素，则内部元素无法滚动。

红框内是一个浮动面板，在手机上通过监听 swipeup 和 swipedown 来显示和收回。面板中的绿色区域是一个长列表，在电脑上通过鼠标滚动可以正常滚动，但是在手机上通过手指上下划动就滚动不了了。

vue 报这个错误是什么原因导致的？

发现一个小问题

在pc端直接查看demo时，鼠标 “swipe（滑动）” 操作时，若是往右滑动，会出现滚动条；但若 “用力” 往左滑动时，会导致容器div滑到窗口以外的地方，并且不会产生滚动条，变得 “消失了”

按照readme的vue方式配置出现以下报错

文档介绍中 document 拼错大佬修改下

或者, 使用NPM

import AnyTouch from 'any-touch';
const el = doucument.getElementById('box');
const at = new AnyTouch(el);
at.on('pan', e => console.log('e包含位移/速度/方向等信息',e))

[doc] Add the library compatibility information?

First of all, thank you very much for contributing such a good thing.

However, when a library is used as a dependency in a production environment, compatibility issues are important. Have you considered adding relevant information to the documentation?

跟原生事件有冲突

因为插件默认阻止了原生事件，导致滚动条无法滚动，但是设置为true，就感觉很卡顿。跟原生事件冲突了。

设置preventDefault: false 后chrome报错 Unable to preventDefault inside passive event listener invocation

import TouchCore from '@any-touch/core';
import Swipe from '@any-touch/swipe';
TouchCore.use(Swipe, { threshold: 10, velocity: 0.2 });

        const el = document.querySelector('.wrap') as HTMLElement;
        el &&
            new TouchCore(el, { preventDefault: false }).on('swipe', e => {
                console.log(e.direction);
                checkSwiper(e.direction);
            });

建议设置为false时彻底清除下 preventDefault

有没有mpvue的例子

如题

vue指令方式使用doubletap默认是false？

在以vue指令方式使用doubletap的时候，发现没效果，然后用了下面代码才可以，问题是，不应该默认是true吗？
importAT (at) { const doubletap = at.get('doubletap') doubletap.disabled = false }

如何限制仅两指点击

你好 我使用了any-touch的tap并设置pointLength为2 即支持的触点数为2
实际情况是允许1～2指点击 想请教一下有什么方法可以使其只支持两指吗？
非常感谢

微信小程序怎么安装 有没详细点的文档

微信小程序怎么安装 有没详细点的文档

不支持 trackpad 触发的 touch 事件

swipe细分的话可以有swipestart，swipemove,swipeend

对应pan的三个状态，一个是长按开始，一个是短按开始

swipestart，swipemove,swipeend

最近做手势项目，头痛死了快，官方也放弃维护官方手势库。

使用 any-touch 后，Vue 的 @click 事件在移动端失效

[BUG] vue3 绑定@pan事件后，快速拖拽松开拖拽松开操作几次会@pan事件执行的函数会一直叠加

比如我一下快速拖拽后松开重复这样的操作3次，下次拖拽10px的距离@pan事件就会一次触发3到4次了

panend不触发

version:1.0.5
浏览器:Chrome 86.0.4240.75
操作系统:macOS

panend不触发,并且会在临近结束随机触发一个或多个pannone

另外请问下,演示中的版本是哪个版本啊? 演示版本没这个问题,我用的功能都没问题,项目有点急

使用 pnpm install 安装的包无法按需引入

添加press事件阻止默认滚动

添加了press事件的dom上手势无法滚动

能否只允许单一方向拖拽？

有没有只允许横向或竖向拖拽的属性配置；还有就是没有找到停止拖拽的函数或方法

缩放一直识别成两个触点

完成一次缩放后，以后使用一个手指都会被识别成两个触点。

支持react吗

请问支持react吗

pan事件中没有返回起始的点

at.on('panstart') 中返回的point并不是起始点，因为这时候distance已经是10了。 能不能返回startPoint

react是否也考虑一下呢？

缺少afterEach

afterEach中返回所有识别的手势事件,以及at:start/at:end等, 现在的at:after事件中并没有at:start/:at:end事件, 不方便做全部事件的拦截代理.

研究下是在any-event中增加还是在any-touch中增加