前言

这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上、下、左、右、放大、缩小),但发现并没有现成的轮子,还是要自己造。

例如:jquery.mousewheel.js(添加跨浏览器的鼠标滚轮支持), 给得太简单,没有处理Mac双指行为,所以不能用。

目标

获取Mac触摸板双指行为,具体有两个,一个是实时拖动路线,二是手势(上、下、左、右、放大、缩小)。

难点

双指行为只会触发mousewheel事件,其他什么的touch,mouse都不会触发,只能从这个下手。

双指特性

1.在快速滑动过程中,deltaX、deltaY值的最初值的正负是与滑动方向不同的。

2.在缓慢滑动过程中,deltaX、deltaY值的值域是非常小的,一般在于[-3, 3]。

3.在1s内,mousewheel事件大概触发100次左右。

4.滑动过程中,数值会有抖动问题。

实现拖动路线思路(Path)

针对快速滑动

1.deltaX、deltaY值的最初值的正负是与滑动方向不同的这部分数据要舍弃。(因为不是真正方向)

2.每次触发的deltaX、deltaY值两两相减,结果值如果与方向不同,则舍弃。
3.剩下的差值就是方向挪动距离。

4.两个方向的所有差值相加,共两组,哪组值大取哪组,正负决定方向。

针对缓慢滑动

1.由于deltaX、deltaY值的值域是非常小,所以都保留,但值与方向不同的,也舍弃。

2.两个方向的所有差值相加,共两组,哪组值大取哪组,正负决定方向。

实现手势思路(Gesture)

在上面的基础上,记录一段时间内deltaX、deltaY和两两差值:

deltaX、deltaY用来统计放大、缩小手势。

两两差值用来统计上、下、左、右手势。

所以,手势是一段时间的手势,而不是某个时刻的。

实现代码

具体代码就不贴出来,可直接在我Github下载:https://github.com/codingforme/jquery-mac-mousewheel

总结

路线问题:mousewheel给予的deltaX、deltaY值跟操作效果有挺大不同,快速滑动效果特别不准确。

手势问题:由于双指特性的第三点,手势实现无法精确,即便是把时间段变得很短,但因为数据量问题(无法用微积分的思路),会变得更不精确;把时间段变长,反应时长又会变长;

具体效果可以下代码来看看,效果不大满意,但可以下载看看,有更好的方案,请告诉我,跪谢。

js实现Mac触摸板双指事件(上、下、左、右、放大、缩小)的更多相关文章

  1. js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)

    前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...

  2. 小米和MAC触摸板手势汇总

    小米的触摸手势: 左键:单指单击 右键:双指单击 选取并打开:单指双击 滚动页面:双指 移动 拖拽项目:双击并拖拽 放大/缩小:双指张开,双指捏合 MAC触摸板手势: http://www.cr173 ...

  3. Mac使用技巧总结-如何独立设置Mac触摸板方向和鼠标滚轮方向?

    Mac使用技巧总结 如何独立设置Mac触摸板方向和鼠标滚轮方向? 苹果Macbook的使用者都知道,Mac自带的触控板非常好用,不仅支持多手势操控,而且手感极佳,使用流畅. 但是如果对鼠标的焦距有高有 ...

  4. 【Firefox浏览器】关闭触摸板双指滑动进行前进后退的功能

    痛点 本以为只是Chrome浏览器存在这一奇葩功能,没成想Firefox也沦陷了!有好一阵子在使用Firefox的时候,并未发现其存在这个功能.直到有一天,打开自己的博客,翻阅上篇< [Chro ...

  5. 修复Win10下Synaptics触摸板双指触击无法打开右键菜单的问题

    从Win8.1开始,Synaptics触摸板驱动的键值就不能正确设置,使得双指触击失效,无法打开右键菜单. 解决方法1.打开注册表:2.搜索“2FingerTapAction”,或直接定位到以下两个路 ...

  6. Mac触摸板没有弹性了

    关机后,同时按启动键,空格键左边的option,command键还有p和r,听到开机声音响四声后再松开.一定要同时按!然后触摸板就可以用了. (转自知乎)

  7. 【Chrome浏览器】关闭触摸板双指滑动进行前进后退的功能

    痛点 Chrome浏览器使用过程中,当前页面经常会莫名其妙地退回到上一个浏览的页面. 当时真是一脸懵B(心里一万头草泥马呼啸而过~)!以为活见鬼了! 后来才发现浏览器左边,有一个幽灵般的淡蓝色箭头的出 ...

  8. ubuntu触摸板双指滑动,页面滚动方向

    setting——mouse & Touchpad——Natural scrolling 跟我的另一台本子一样了-

  9. 给X240换上了三键触摸板

    X240自带的触摸板非常不好用, 对于我这样的指点杆重度用户, 每次要按下整块板真的是太费力了, 而且在夜里声音很吵. 在淘宝上买了三键的X250的触摸板换上了. 这是购买的触摸板的型号 换的时候, ...

随机推荐

  1. mysql 语句总结

    1.多表查询 SELECT a.id,catid,thumb,title FROM v9_gamedown as a LEFT JOIN v9_gamedown_data as b ON a.id=b ...

  2. Linux下使用javac编译

    Linux下使用javac编译Hadoop程序 首先要配置好Hadoop, 给出两个教程 Hadoop安装教程单机/伪分布式配置Hadoop2.6.0/Ubuntu14.04 Hadoop集群安装配置 ...

  3. java原装代码完成pdf在线预览和pdf打印及下载

    这是我在工作中,遇到这样需求,完成需求后,总结的成果,就当做是工作笔记,以免日后忘记,当然,能帮助到别人是最好的啦! 下面进入正题: 前提准备: 1. 项目中至少需要引入的jar包,注意版本: a)  ...

  4. echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮

    echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...

  5. C# Webform中读取Windows AD/LDAP域用户清单

    直接上干货,核心代码如下,读取出来相应的用户清单到DataTable中.需要其它字段可以自己增加,别忘了引用using System.DirectoryServices. #region privat ...

  6. [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别

    清空元素html("").innerHTML="" 与 empty()的区别 一.清空元素的区别     1.错误做法一:           $(" ...

  7. AspNet Identity 和 Owin 谁是谁

    英文原文:http://tech.trailmax.info/2014/08/aspnet-identity-and-owin-who-is-who/ 最近我发现Stackoverflow上有一个非常 ...

  8. 做一个360度看车的效果玩玩(web)

    前几天在 Lexus 官网看到有这样的一个效果:http://www.lexus.com.cn/models/es/360 于是顺手打开控制台看了下他们是怎么做的,发现使用的技术还是比较简单的,通过背 ...

  9. poj1611

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 35918   Accepted: 17458 De ...

  10. MySQL日志系统

    body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...