JavaScript 实现跨浏览器鼠标滚轮事件处理

JavaScript 实现跨浏览器鼠标滚轮事件处理

从网络资源中获取响应滚轮的函数，并将其改写为如下所示的类结构。

function wheelEvent(obj, handle)
{ 
this.handle = handle;
// 区分Firefox与IE的不同事件类型
window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel);
} 
wheelEvent.prototype.wheel = function (event)
{ 
var ev = event || window.event;
var delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3); // Firefox使用`wheelDelta`，IE使用`detail`
eval ('delta ? ' + parent.handle + '(delta) : null;');
} 

使用时需定义一个执行函数，该函数根据从上述类中获取的值进行相应操作，并为指定的网页元素添加事件监听。例如：

function handle(delta)
{ 
document.getElementById('text').scrollTop -= delta * 20;
} 
new wheelEvent(document.getElementById('text'), 'handle');

在上述示例中，第一个参数是添加滚轮事件的网页元素，即id为text的div；第二个参数是执行函数的名字handle。

其中handle函数必须有且只有一个参数delta，滚轮往上滚时delta大于0，往下则小于0。上例handle函数的作用是用滚轮对div实现滚动条的功能