zoukankan      html  css  js  c++  java
  • mousewheel事件的兼容方法

    在垂直方向上滚动页面时,会触发mousewheel事件,这个事件会在任何元素上触发,最终都会冒泡到document(IE8)或window(IE9+及其他主流现代浏览器)对象。

    在给元素指定mousewheel事件时,FireFox不支持使用onmousewheel,而是支持一个名为DOMMouseScroll的事件。DOMMouseScroll与onmousewheel的区别是,前者只能通过DOM2级事件处理程序的方法,即addEventListener()方法添加事件处理程序,而后者可以使用DOM0级(element.onmousewheel=function() {})和DOM2级事件处理程序的方法添加事件处理程序。

    为了在不同浏览器中能使用一样的代码,我想了一个给元素添加mousewheel事件的通用方法。下面是代码:

     1 function addMouseWheelEvent(element,func) {
     2  
     3    if (typeof element.onmousewheel == "object") {
     4       element.onmousewheel = function() {
     5         func();
     6      };
     7    }
     8 
     9    if (typeof element.onmousewheel == "undefined") {
    10       element.addEventListener("DOMMouseScroll",func,false);
    11    } 
    12  }

    方法的名称是addMouseWheelEvent,该方法接收两个参数:element表示要添加mousewheel事件的元素节点,func表示作为事件处理程序的函数。使用方法是直接调用该函数并出入适当的参数即可:addMouseWheelEvent(element,func);

    原理是:在支持onmousewheel的浏览器中element.onmousewheel的typeof值为object,在不支持onmousewheel的浏览器中element.onmousewheel的typeof值为undefined。可以根据typeof值的不同对浏览器进行能力检测,从而应用不同的添加事件处理程序的方法。

    经过测试该方法在chrome、IE11和FireFox中能正常使用。

    补充:

    在给元素指定mousewheel事件时,对应的event对象会有一个wheelDelta属性(规范中的属性),当用户向前滚动滚轮时,其值是120的整数倍,当用户向后滚动滚轮时,其值是-120的整数倍。当然在FireFox中这个属性不叫wheelDelta,而是叫detail,当用户向前滚动滚轮时,detail的值是-3的整数倍,当用户向后滚动滚轮时,detail的值是3的整数倍,正负号与wheelDelta的值是相反的。

    2017-5-12更新:现在看当初自己写的这个方法,实在是不怎么样。根据判断条件都用DOM2级添加事件的方法,还要传入事件对象,这样更合理。

  • 相关阅读:
    洛古模拟赛--星空
    bzoj4476 [Jsoi2015]送礼物
    矩阵乘法总结
    bzoj 3167 SAO
    codeforces 671D
    10.28
    noip前集训
    10.2晚 模拟继续
    10.2 考试
    10.1 国庆 考试
  • 原文地址:https://www.cnblogs.com/fogwind/p/5844420.html
Copyright © 2011-2022 走看看