鼠标滚轮(mousewheel)和DOMMouseScroll事件

IE6.0首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document(IE)或window(Opera、Chrome、及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息之外，还包含一个特殊的wheelDelta属性。当用于向前滚动鼠标滚轮是，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮是，wheelDelta是-120的倍数。
将mousewheel事件处理程序指定给页面中的任何元素或document对象，即可以处理鼠标滚轮的交互操作。来看下面的例子

Event.addHnadler(document, "mousewheel", function (event) {

    event = EventUtil.getEvent(event);

    alert(event.wheelDelta);

});

 

这个例子会在发生mousewheel事件时显示wheelDelta的值。多数情况下，只要知道鼠标滚轮滚动的方向就够了，而这通过检测wheelDelta的正负号就可以确定。
在Opera9.5之前的版本中，wheelDelta的值的正负号是颠倒的。如果你打算支持早期的Opera版本，就需要使用浏览器检测技术来确定实际的值，如下面的例子所示：

EventUtil.addHandler(document, "mousewheel", function () {

    event = EventUtil.getEvent(event);

    var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);

    alert(delta);

});

 

Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚动时触发。与mousewheel事件一样，DOMMouseScroll也被视为鼠标事件，因而包含与鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中，当向前滚动鼠标滚轮时，这个属性的值是-3的倍数，当向后滚动鼠标滚轮时，这个属性的值是3的倍数。

可以将DOMMouseScroll事件天骄到页面中的任何元素，而且该事件会冒泡的window对象。因此，可以像下面这样针对这个事件添加事件处理程序：

EventUtil.addHandler(window, "DOMMouseScroll", function (event) {

    event = EventUtil.getEvent(event);

    alert(event.detail);

})

 

这个简单的事件处理程序会在鼠标滚轮滚动时显示detail属性的值。
若要给出跨浏览器的解决方案，第一步就是创建一个能够取得鼠标滚轮增量值（delta）的方法。下面是我们添加到EventUtil对象中的这个方法：

var EventUtil = {

    getWheelDelta: function (event) {

        if (event.wheelDelta) {

            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);

        } else {

            return -event.detail * 40;

        }

    }

};

这里，getWheelDelta()方法首先检测了事件对象是否包含wheelDelta属性，如果是则通过浏览器检测代码确定正确的值。如果wheelDelta不存在，则假设相应的值保存在detail属性中。由于Firefox的值有所不同，因此首先要将这个值的符号反向，然后再乘以40，就可以保证与其它浏览器的值相同了。有这个方法之后，就可以将相同的事件处理程序指定给mousewheel和DOMMouseScroll事件了，例如：

function handleMouseWheel(event) {

    event = EventUtil.getEvent(event);

    var delta = EventUtil.getWheelDelta(even);

    alert(delta);

}

EventUtil.addHandler(document, "mousewheel", handleMouseWheel);

EventUtil.addHandler(document, "mousewheel", handleMouseWheel);

下面是跨浏览器环境下的解决方案：

var client = function () {

        var engine = {

            //呈现引擎

            ie: 0,

            gecko: 0,

            webkit: 0,

            khtml: 0,

            opera: 0,

            //具体版本号

            ver: null

        };

        var browser = {

            //浏览器

            ie: 0,

            firefox: 0,

            konq: 0,

            opera: 0,

            chrome: 0,

            safari: 0,

            //具体版本号

            ver: null

        };

        var system = {

            win: false,

            mac: false,

            x11: false

        };

        //在此检测呈现引擎、平台设备

        return {

            engine: engine,

            browser: browser,

            system: system

        };

    }();

var EventUtil = {

    getEvent: function (event) {

        return event ? event : window.event;

    },

    addHandler: function (element, type, handler) {

        if (element.addEventListener) {

            element.addEventListener(type, handler, false);

        } else if (element.attachEvent) {

            element.attachEvent("on" + type, handler);

        } else {

            element["on" + type] = handler;

        }

    },

    getWheelDelta: function (event) {

        if (event.wheelDelta) {

            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);

        } else {

            return -event.detail * 40;

        }

    }

};



function handleMouseWheel(event) {

    event = EventUtil.getEvent(event);

    var delta = EventUtil.getWheelDelta(event);

    alert(delta);

}

EventUtil.addHandler(document, "mousewheel", handleMouseWheel);

EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);

在iPhone和iPodTouch中，如果两个手指同时放在屏幕上，而且页面因手指移动而滚动，也会触发mousewheel事件。