鼠标滚轮事件和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字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
python机器学习实战之K均值聚类
2017/12/20 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python 实现字符串下标的输出功能
2020/02/13 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
网络管理专业求职信
2014/03/15 职场文书
我为自己代言广告词
2014/03/18 职场文书
党课培训主持词
2014/04/01 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL