zoukankan      html  css  js  c++  java
  • JS滚轮mousewheel事件和DOMMouseScroll事件

    滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派。

    包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseScroll. 经自己测试,即使现在FireFox 19下,也是不识onmousewheel

    一个最简单的使用差异(body滚动条由内部一定高div撑开):

    document.body.onmousewheel = function(event) {
        event = event || window.event;
        console.dir(event);	
    };
    document.body.addEventListener("DOMMouseScroll", function(event) {
        console.dir(event);	
    });

    鼠标滚动事件与点击事件有很多类似的地方。比方说兼容部分:event.typeevent.screenX/event.screenYevent.clientX/event.clientYevent.altKeyevent.shiftKeyevent.cancelBubble都是一样的,不兼容的部分,IE6-8的event.srcElement与其他浏览器的event.target.

    对于FireFox浏览器(Opera浏览器也有),判断鼠标滚动方向的属性为event.detail, 向下滚动值为3.
    FireFox浏览器下event.detail, 值为3

    需要注意的是,FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值,而其他浏览器是负值。

    兼容的滚轮事件方法

    /**
     * 简易的事件添加方法
     */
     
    define(function(require, exports, module) {
        exports.addEvent = (function(window, undefined) {        
            var _eventCompat = function(event) {
                var type = event.type;
                if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                    event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
                }
                //alert(event.delta);
                if (event.srcElement && !event.target) {
                    event.target = event.srcElement;    
                }
                if (!event.preventDefault && event.returnValue !== undefined) {
                    event.preventDefault = function() {
                        event.returnValue = false;
                    };
                }
                /* 
                   ......其他一些兼容性处理 */
                return event;
            };
            if (window.addEventListener) {
                return function(el, type, fn, capture) {
                    if (type === "mousewheel" && document.mozFullScreen !== undefined) {
                        type = "DOMMouseScroll";
                    }
                    el.addEventListener(type, function(event) {
                        fn.call(this, _eventCompat(event));
                    }, capture || false);
                }
            } else if (window.attachEvent) {
                return function(el, type, fn, capture) {
                    el.attachEvent("on" + type, function(event) {
                        event = event || window.event;
                        fn.call(el, _eventCompat(event));    
                    });
                }
            }
            return function() {};    
        })(window);        
    });
  • 相关阅读:
    【转载】产品经理如何行之有效的提高执行力
    【转载】20个2013年最值得关注的网页设计趋势
    【转载】HTTP协议详解
    工作一年的心得与体会
    【转载】什么是SVG
    【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
    【转载】前台页面优化全攻略-系列博文
    flink的checkpoint
    HBase概述
    牛客题霸--跳台阶题解
  • 原文地址:https://www.cnblogs.com/shuaishuaidejun/p/8599180.html
Copyright © 2011-2022 走看看