鼠标滚轮事件和Mac触控板双指事件


Posted in HTML / CSS onDecember 23, 2019

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

1. 用哪个事件

The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). This event replaces the non-standard deprecated mousewheel event.

以前常使用的mousewheel事件已经逐渐被官方废弃了,改用wheel事件代替,所以这里会优先使用wheel,并向下兼容。

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

2. 兼容写法

// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {

    var prefix = "", _addEventListener, onwheel, support;

    // detect event model
    if ( window.addEventListener ) {
        _addEventListener = "addEventListener";
    } else {
        _addEventListener = "attachEvent";
        prefix = "on";
    }

    // detect available wheel event
    support = "onwheel" in document.createElement("div") ? "wheel" : // 各个厂商的高版本浏览器都支持"wheel"
              document.onmousewheel !== undefined ? "mousewheel" : // Webkit 和 IE一定支持"mousewheel"
              "DOMMouseScroll"; // 低版本firefox

    window.addWheelListener = function( elem, callback, useCapture ) {
        _addWheelListener( elem, support, callback, useCapture );

        // handle MozMousePixelScroll in older Firefox
        if( support == "DOMMouseScroll" ) {
            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
        }
    };

    function _addWheelListener( elem, eventName, callback, useCapture ) {
        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
            !originalEvent && ( originalEvent = window.event );

            // create a normalized event object
            var event = {
                // keep a ref to the original event object
                originalEvent: originalEvent,
                target: originalEvent.target || originalEvent.srcElement,
                type: "wheel",
                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
                deltaX: 0,
                deltaZ: 0,
                preventDefault: function() {
                    originalEvent.preventDefault ?
                        originalEvent.preventDefault() :
                        originalEvent.returnValue = false;
                }
            };
            
            // calculate deltaY (and deltaX) according to the event
            if ( support == "mousewheel" ) {
                event.deltaY = - 1/40 * originalEvent.wheelDelta;
                // Webkit also support wheelDeltaX
                originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
            } else {
                event.deltaY = originalEvent.detail;
            }

            // it's time to fire the callback
            return callback( event );

        }, useCapture || false );
    }

})(window,document);

这个是MDN 上推荐的兼容写法,可以看到这几个事件的顺序是 wheel > mousewheel > DOMMouseScroll。如果使用wheel事件,event不做处理。否则,重新封装了event。

3. 方向判断

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

function wheelEvent (e) {
    if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) return console.log('没有固定方向');
    if (e.deltaX < 0) return console.log('向右');
    if (e.deltaX > 0) return console.log('向左');
    if (e.ctrlKey) {
        if (e.deltaY > 0) return console.log('向内');
        if (e.deltaY < 0) return console.log('向外');
    } else {
        if (e.deltaY > 0) return console.log('向上');
        if (e.deltaY < 0) return console.log('向下');
    }
}

经过测试,delta是用来判断方向最好的一个值,wheelDelta和detail都有各自的兼容等问题。

deltaX是左右方向的滑动,deltaY是上下方向。

向里收缩是和向下滚动相同,向外扩张是和向上滚动相同。这是正常的用户习惯,但是麻烦的是事实刚好和我们的习惯相反,这样单纯依靠deltaY来判断是区分不开的。

经过测试ctrlKey这个字段只有在双指方向不一致时,才会为true。这样就能区分开了,从而产生了6种情况,逐一处理。

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

ctrlKey: originalEvent.ctrlKey || false,

这个问题解决了,之后会抽时间把K线图的代码整理一下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 #HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 #HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 #HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 #HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 #HTML / CSS
吃透移动端 1px的具体用法
Dec 16 #HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 #HTML / CSS
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php仿ZOL分页类代码
2008/10/02 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
php给数组赋值的实例方法
2019/09/26 PHP
关于js注册事件的常用方法
2013/04/03 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
浅析Python中signal包的使用
2015/11/13 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
行政总经理岗位职责
2013/12/05 职场文书
投标售后服务承诺书
2015/04/29 职场文书
高一军训感想
2015/08/07 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技