移动端手势操作--两点同时点击的实现方案
手机屏幕单点接触是click事件,那两点接触呢?最近项目中的需求是监视手机屏幕的两个手指同时点击事件。类似的需求还是多个手指点击等。技术实现方案很简单,但是由于一个人思路有限,结果绕了一些弯路。记录下来,勤思考,多实践
在线demo:https://codepen.io/zhaobinglo...
监听gesturestart事件
gesturestart事件与常用的click,dbclick时间是同样的道理,只需要绑定到指定的对象上,那用户两个手指点击对象时就会响应
这种实现方案存在一定的缺陷,当两个手指点击的时候,手指必须一前一后点击才可以触发,如果两个手指绝对同时点击屏幕,会被视为是一个click事件,而不是gesturestart事件
gesturestart事件在安卓机型全军覆没,不建议使用
使用hammer.js库
hammer.js是一个移动端手势操作库,在github上有超高人气。使用hammer.js定义的pinch方法,该方法封装了两点收缩和分开的手势,给对象绑定pinchstart事件,就可以监听两个手指的点击事件
这种方案也存在一定的缺陷,当两个手指点击屏幕的时候,必须开始滑动或者有滑动的趋势,才可以正确的识别出来
项目地址 http://hammerjs.github.io/
使用touchstart监听
使用原生js的touchstart
上面的两种方案,针对两点点击的效果,都可以勉强实现想要的效果,但是都有缺陷。最佳实现方案,是监听touchstart,touch事件对象中的touches数组记录了当前接触的点击位置,如果是两个手指点击,这里的length将为2,同理,如果要监听三个手指的点击,length将为3。经过实践,该方案是实现效果最完美的方案
使用jquery绑定touchstart
如果项目中使用的是jquery,在jquery中判断触摸点的个数和原生js稍有不同,jquery中使用
event.originalEvent.targetTouches.length来获取当前触摸点的个数。通过判断触摸点个数是否为2,来响应业务逻辑
最后一步优化
做到上一步,其实已经相当完美了,但是真实的项目里面永远会有层出不穷的坑。假设当前的page内容很长,当用户touchmove的时候,event.originalEvent.targetTouches.length也会为2,这是为什么呢?因为touchmove会不断的把获取到的坐标添加到targetTouches数组里面。所以为了避免touchmove的时候触发业务逻辑,这里必须把touchmove的情况过滤掉。当touchmove的时候,targetTouches中保存有用户touch坐标,假设向下滑动,每个touch的纵坐标差值会非常小,这里我设置一个临界值20(20已经相当大了,实际测试的时候,差值在1左右),只有当touch的纵坐标差值在20以上,我们才把这次touch当作是两个手指的触摸
移动端手势操作--两点同时点击的实现方案相关推荐
- acc--›Android无障碍开发手势操作
文章目录 前言 dispatchGesture `api>=24` GestureDescription GestureResultCallback 执行手势 DslAccessibilityG ...
- 20211209_惠普光影精灵3使用U盘重装Windows11, 并修复造成的两个问题: 一是重装win11系统后导致的手势操作消失; 二是装成了双系统;
20211209_惠普光影精灵3使用U盘重装Windows11, 并修复重装win11系统后导致的手势操作消失, 装成了双系统的问题. 1.环境装备 1. U盘8G以上 2. Win11的iso镜像文 ...
- js常用插件(二)之移动端手势利器hammer单双指操作
js常用插件之hammer单双指操作 欢迎点击: 个人官网博客 移动端手势利器: 先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/ ...
- vue 多点触控手势_移动端手势事件(多指操作)
在移动端开发中,现有的手势事件只有IOS上的浏览器支持,因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart.toucmove.touchend事件上进行改造升级,下面就介绍下升级改 ...
- 移动端手势库设计与实践
前言 本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践. 核心技术 主要就是利用移动端的以下3个触摸事件,来模拟和实现自定义的手势操作 touchstart:手指触摸到屏幕的一瞬间触发 to ...
- 苹果鼠标右键怎么按_Mac触控板常用的手势操作,让你告别Windows鼠标!
https://www.zhihu.com/video/967471235399155712 在Windows电脑上,鼠标是一个划时代的发明,如果没有它,似乎用电脑进行的大量工作都要停滞.从学习电脑开 ...
- html拖拽手势,h5实现手势操作放大缩小拖动等
最近开发遇到了这个需求,使用vue开发h5加一个手势放大缩小的功能,移动端的手势操作用原生的写法太麻烦,而且体验还不好,所以从github找到一个hammer.js的一个手势操作插件. 官方文档地址: ...
- Android手势操作耍起来!
目录 前言 初步了解手势操作 六个重写方法 小栗子体验一下 别忘了双击事件 最后 前言 手势操作是Android交互当中至关重要的. 可以说, 如果一个软件没有好的手势操作, 就不能将其定义为移动端的 ...
- Unity Joystick手势操作
Unity Joystick手势操作 作者:无聊 实现原因 由于制作Demo的需要,第三方的相关插件都过于重量级,所以就自己实现了一个简单的手势操作方案. 基本功能 本文实现了一个简易的Unity J ...
最新文章
- 初学者编写python用什么软件好_初学者编写python用什么软件
- “外部质量”还是“内部质量”
- 数据库系统原理(第5章:数据库编程)
- 计算机网络作业6,计算机网络作业 6
- java 基本类型 包装类型_Java中基本类型和包装类
- ubuntu16安装pymesh2的方法
- 使用nosetests对webpy程序做单元测试
- python调用可执行文件_如何从Python脚本调用可执行文件?
- 贪吃蛇小游戏(C语言)
- 网络QoS原理与实现
- pg数据库生成随机时间_postgreSQL自动生成随机数值的实例
- win7 设置电脑保护色
- 微信小程序-项目初始化
- freemaker 导出自动分页word文档
- Python大数据处理库 PySpark实战 总结四
- iOS 15.3+ SwiftUI中List子项目禁止被删除但头部仍显示删除按钮的解决
- envi读取格式ang 还是mtl,mtl文件格式
- python继承怎么写_python 继承
- 集成推送(极光+小米+华为)总结(java服务端)
- HBUilder X 使用方法
热门文章
- Linux中root下目录中没有.ssh文件
- 连续变量的转换:ECDF、Box-Cox、Yeo-Johnson
- 新手探索NLP(八)——序列标注
- windows美化工具7+ Taskbar Tweaker
- C#多线程---Task实现异步
- ionic+angularJS+iOS混合开发app的学习资料介绍和基本步骤(干货)
- 整数行hdu 1244 Max Sum Plus Plus Plus(dp)
- 解决R 4.0版本包的安装错误
- 直线和圆交点 halcon_初中数学三角形、四边形、圆辅助线的添加方法
- javascript中的面向对象_面向对象和函数式编程的本质区别