mac鼠标滚轮相反触摸双指,macbook触控板鼠标滚动

　　因为下一阶段要做的一个工作是开发一个网端的K线图，所以这一周一直在研究这方面的东西，其中涉及到的一个知识点是鼠标滚轮事件和苹果个人计算机的触控板双指事件，发现这里面还是有一些坑的。

　　1. 用哪个事件

　　当用户旋转定点设备（通常是鼠标)上的滚轮按钮时，将触发车轮事件。此事件替换非标准的不推荐使用的鼠标滚轮事件。

　　以前常使用的鼠标滚轮事件已经逐渐被官方废弃了，改用车轮事件代替，所以这里会优先使用轮子，并向下兼容。

　　另外，即使是车轮事件，各浏览器的表现也可能不尽相同，都是各大浏览器自己的规范，官方并没有一个标准，虽然我也不知道为什么。

　　2. 兼容写法

　　//创建一个全局" addwheelistener "方法//示例：addwheelistener(elem，函数(e){控制台。log(例如deltay)；e .防止违约()；} );(function(window，document) { var prefix= ，_addEventListener，onwheel，support//检测事件模型如果(窗口。addevent listener){ _ addevent listener= addevent listener ；} else { _ addevent listener= attach event ；前缀="开"；} //检测document.createElement(div )中可用的车轮事件支持=onwheel ？车轮://各个厂商的高版本浏览器都支持wheel document.onmousewheel！==未定义？鼠标滚轮://网络工具包和工业管理学(工业工程)一定支持鼠标滚轮“DOM鼠标滚动”；//低版本火狐窗口。addwheelistener=function(elem，callback，use capture){ _ addwheelistener(elem，support，callback，use capture)；//处理旧版火狐如果中的mozzeepixelscroll(support== DOM mouse scroll ){ _ addwheelistener(elem， mozzeepixelscroll ，callback，use capture)；} };function _addWheelListener( elem，eventName，callback，use capture){ elem[_ addevent listener](前缀eventName，support==wheel ？回调：函数(originalEvent ) {！原始事件(原始事件=窗口。事件)；//创建一个规范化的事件对象var event={ //保留一个对原事件对象原始事件的引用originalEvent: originalEvent，target:原始事件。目标原始事件。srcelement，type: wheel ，delta模式：原始事件。type== mozzeepixelscroll ？0 : 1，deltaX: 0，deltaZ: 0，prevent default:function(){原始事件。防止违约？原事件。prevent default():原始事件。返回值=false} };//根据事件if(support==鼠标滚轮){ event。deltaY=-1/40 *原始事件。车轮delta//Webkit还支持车轮deltax原始事件。车轮deltax(事件。deltax=-1/40 *原始事件。车轮x)；} else {事件。deltay=原始事件。细节；} //是时候发射回调回拨(事件)了；}，使用capture false)；}})(窗口，文档);这个是移动用户号码簿号码上推荐的兼容写法，可以看到这几个事件的顺序是滚轮鼠标滚轮鼠标滚动。如果使用车轮事件，事件不做处理。否则，重新封装了事件。

　　3. 方向判断

　　鼠标滚轮的话，只有上、下两个方向，但是如果是触摸板的双指行为的话，除了上、下以外，还有左、右方向，以及双指向内收缩、向外扩张四种情况，接下来，就对这几种情况做判断处理。

　　function wheel event(e){ if(math . ABS(e . deltax)！==0 Math.abs(e.deltaY)！==0)返回console.log(无固定方向)；If (e.deltaX 0)返回console.log(向右)；If (e.deltaX 0)返回console . log( left )；If (e.ctrl键){if (e.deltay0)返回console . log( inward )；If (e.deltaY 0)返回console . log( outward )；} else {if (e.deltay0)返回console . log( up )；If (e.deltaY 0)返回console . log( down )；}}经过测试，delta是用来判断方向的最佳值，wheelDelta和detail都有各自的兼容性问题。

　　DeltaX是左右方向的滑动，deltaY是上下方向。

　　向内收缩和向下滚动一样，向外扩张和向上滚动一样。这是一个正常的用户习惯，但麻烦的是事实正好与我们的习惯相反，所以完全依靠deltaY来判断是分不开的。

　　经过测试，只有当两个手指的方向不同时，ctrlKey这个域才会为真。这样就可以区分，产生六种情况，逐一处理。

　　所以上面兼容的写法也需要返回ctrlKey。

　　Ctrl键：originalevent.ctrl键 false，这个问题解决了，接下来我会花时间整理k线图的代码。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读