将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(){ function handleMouseWheel(event) { event = EventUtil.getEvent(event); var delta = EventUtil.getWheelDelta(event); alert(delta); } EventUtil.addHandler(document, "mousewheel", handleMouseWheel); EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel); })();
下面是跨浏览器环境下的解决方案:
var client = function () { var engine = { //呈现引擎 ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, //具体版本号 ver: null }; return { engine: engine }; }(); 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(){ function handleMouseWheel(event) { event = EventUtil.getEvent(event); var delta = EventUtil.getWheelDelta(event); alert(delta); } EventUtil.addHandler(document, "mousewheel", handleMouseWheel); EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel); })();