js滚轮事件兼容写法

Posted 黎明之光123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js滚轮事件兼容写法相关的知识,希望对你有一定的参考价值。

/**
 * 简易的事件添加方法
 */
 
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);        
});

  于是,我们就可以很从容使用mousewheel事件了。例如:

addEvent(dom, "mousewheel", function(event) {
    if (event.delta < 0) { alert("鼠标向上滚了!"); }
});

  

以上是关于js滚轮事件兼容写法的主要内容,如果未能解决你的问题,请参考以下文章

监听鼠标滚轮事件

各浏览器鼠标滚轮事件

js滚轮事件需要注意的兼容性问题

js事件对象兼容性写法

阻止默认事件,滚轮事件与滚动事件

js事件监听的兼容写法