• 鼠标滚动:mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理


    这是一个小事件,但当下的WEB应用交互非常丰富,判断鼠标的滚动来执行相应的操作是比较常见的。我用Chrome/IE/Firefox/Opera 4种浏览器做测试,发现只有firefox的处理方法有很大的不同,下面细说一下这个情况:

    第1、事件的名称不同

    其它浏览器均采用mousewheel做为事件的名称,而Firefox采用DOMMouseScroll做为事件的名称,为了兼容,那我们就得绑定两次事件,如下:

    1 document.addEventListener('mousewheel', handlerMouseWheel);
    2 document.addEventListener('DOMMouseScroll', handlerMouseWheel);

    第2、判断滚轮的方向和值均不同

    其它浏览器均是向上滚动为正值(+120)、向下滚动为负值(-120)。而Firefox则是向上滚动为负值(-5),向下滚动为正值(+5)

    第3、包装event对象不同

    Firefox对滚轮滚动的值保存在event对象中的detail属性里,而其它浏览器保存在event对象中的wheelDelta属性。

    为了方便统一处理,我们还得编写一个函数,让firefox与其它浏览器的取值与方向相同,代码如下:

    1 var getWheelDelta = function(event) {
    2     return event.wheelDelta || (-event.detail * 24);
    3 }

    上面采用-event.detail来保持方向一致,放大24倍来保持值一致。(保持一次并非必需的,但有些情况下保持一致有利于处理)

  • 相关阅读:
    2017-2018-2 20155206 《网络对抗技术》 实验六:信息搜集与漏洞扫描
    20155206 Exp5 MSF基础应用
    20155206 实验4 恶意代码分析
    20155206《网络攻防》第三次实验_免杀及其原理
    20155206 Exp2 后门原理与实践
    20155206赵飞 Exp1PC平台逆向破解及Bof基础实践
    J-19 集合对象
    J-18 集合对象
    J-17 集合对象
    J-16 集合对象
  • 原文地址:https://www.cnblogs.com/langzs/p/6684282.html
Copyright © 2020-2023  润新知