单点手势库简单思考实现

ybak 发布于2019-08-22 15:39 / 970人阅读

摘要：单点手势库分析手势是什么有哪些方法实现首先我这里指的手势是指我们在移动端进行触屏交互的时候，用户操作的一些手势。可以看地址总结这是我挺久之前做的移动端单点手势库个人博客地址学习时参考剧中人

单点手势库 分析

手势是什么？

有哪些方法实现？

首先我这里指的手势是指我们在移动端进行触屏交互的时候，用户操作的一些手势。
在我们在移动端需要一些交互的时候。难免有时候需要左滑右滑。

目前市面上常见的有两种实现，一种是基于touch事件做判断，一种是自定义事件。

我们接下来使用基于touch时间做判断实现。

首先分析下我们需要的。

长按事件

单击事件

双击事件

上下左右滑动

上下左右滑动中

移除事件，绑定事件

(不知道要不要po代码细节)

main

单击事件判断单击事件是很简单的，只要touchStart开始了，我们就可以判断这个事件是单击事件触发了，主要是需要与别的事件互斥，因为只要你触碰到屏幕，在一定程度下都可以认为是一次单击事件

长按事件判断单击事件与长按事件的区别是什么。是触碰屏幕进行交互的时间较单击事件事件长，长多少呢？具体的阈值应该可以自控

双击事件判断我们知道移动端浏览器会有一个所谓的300ms问题。300ms问题其实就是浏览器需要判断用户这次点击是单击还是双击，我们要做出快速响应~就是在一个时间内，用户是否再点击了屏幕。

上下左右滑判断也就是离开屏幕的时候。位置与原坐标进行偏移了。从这个偏移量可以判断，是哪个位置的滑动。

上下左右滑动时判断滑动时是什么意思。也就是当我们只是单纯的判断上下左右滑动的话，那么此时我们不能在滑动时候做交互。有一些效果，类似下拉刷新之类的就无法使用了。所以我们还需要添加滑动时。

一些注意的点 上下左右滑动事件判断。

当我们单击的时候，有一定程度上手机做了轻微的偏移量。此时应该有一个兼容范围，用来识别这种操作偏移，而不是用户真正的目的。

滑动中

既然上下左右滑动中事件都有了，那是不是可以有一个滑动中事件。

一些写法。

有绑定事件应该让用户有解绑事件。
绑定是根据元素节点？类名？还是什么绑定。该事件是否要冒泡。
回调函数操作对象包含什么？
解绑事件是什么形式解绑

开始coding

整体规划

首先是一个touch对象。它有on remove事件用于绑定删除元素
观察者模型即可

然后根据传入绑定的dom节点，进行touchStart touchmove touchend 做判断，只是一些逻辑的互斥还有setTimeout延迟用于判断一些复杂手势（长按之类）

是否冒泡的话~应该使用立即传入，因为我们的操作在一定程度上是一种代理。对内部有时候不是必可控，而且还牵扯着一些setTimeout的判断。

end

此次无具体代码。
可以看github地址

总结

这是我挺久之前做的

移动端单点手势库

zwk个人博客地址

学习时参考剧中人.com

GPU云服务器云服务器 web 手势控制库 webrtc 手势操作实现实现自定义手势简单视频库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93624.html

单点手势库

摘要：单点手势库分析手势是什么有哪些方法实现首先我这里指的手势是指我们在移动端进行触屏交互的时候，用户操作的一些手势。可以看地址总结这是我挺久之前做的移动端单点手势库学习时参考剧中人你可以在这里找到我个人网站单点手势库分析手势是什么？有哪些方法实现？首先我这里指的手势是指我们在移动端进行触屏交互的时候，用户操作的一些手势。在我们在移动端需要一些交互的时候。难免有时候需要左滑右...

jollywing 2019-08-23 16:13 评论0 收藏0
单点手势库

摘要：单点手势库分析手势是什么有哪些方法实现首先我这里指的手势是指我们在移动端进行触屏交互的时候，用户操作的一些手势。可以看地址总结这是我挺久之前做的移动端单点手势库学习时参考剧中人你可以在这里找到我个人网站单点手势库分析手势是什么？有哪些方法实现？首先我这里指的手势是指我们在移动端进行触屏交互的时候，用户操作的一些手势。在我们在移动端需要一些交互的时候。难免有时候需要左滑右...

FuisonDesign 2019-08-02 16:08 评论0 收藏0
移动端手势库设计与实践

摘要：前言本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践。实现即手指滑动事件，应用场景如轮播图左右滑动切换，整屏页面滑动翻页等，算是移动端最常见的手势之一了。前言本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践。核心技术主要就是利用移动端的以下3个触摸事件，来模拟和实现自定义的手势操作 touchstart：手指触摸到屏幕的一瞬间触发 touchmove：手指...

wudengzan 2019-08-22 15:45 评论0 收藏0
AlloyFinger web 手势学习

摘要：从长按开始学习手势在项目开发过程中遇到有虚拟键盘开发的需求如下图，其中删除键需要实现长按删除输入框全部内容，由此展开今天要讨论的手势开发内容。所以长按手势实际上是由三者共同模拟的效果。从 [长按] 开始学习 web 手势在项目开发过程中遇到有虚拟键盘开发的需求（如下图），其中删除键需要实现长按删除输入框全部内容，由此展开今天要讨论的 web 手势开发内容。 showImg(h...

seanlook 2019-08-22 14:51 评论0 收藏0