any86/any-touch

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

你好😀

哈尔滨人, 写代码, 打篮球.

= 工作笔记 = 一键mock = vue3报错列表 = ts 更新日志速读 = 我的常用短代码 = py笔记

any-touch's Issues

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

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

设置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

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

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

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

panend在移动端不触发

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

文档介绍中 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))

缩放一直识别成两个触点

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

要是有doubletap 双击事件就好了

要是有doubletap 双击事件就好了

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

文档错误

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

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

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

不支持 trackpad 触发的 touch 事件

[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?

支持react吗

请问支持react吗

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

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

移动端无法滚动

使用 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>

原生js如何使用

如题

编译的问题

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

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

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

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

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

swipestart，swipemove,swipeend

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

缺少afterEach

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

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

panend不触发

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

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

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

input事件返回手势名

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

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

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

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

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

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

跟原生事件有冲突

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

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

可以在canvas上使用吗？

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

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

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

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

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

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

react是否也考虑一下呢？

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>

swipe 很难触发

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

如何限制仅两指点击

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

添加press事件阻止默认滚动

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

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

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

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

参考

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

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

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

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

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

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

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

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

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

求助一个事情

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

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

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

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

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

发现一个小问题

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

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

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

有没有mpvue的例子

如题