[网摘]IE和Firefox的鼠标滚轮事件JavaScript代码

1.==================================

滚轮IE和Firefox的代码不一样：

IE是mousewheel事件，Firefox是DOMMouseScroll事件

事件属性，IE是event.wheelDelta，Firefox是event.detail

属性的方向值也不一样，IE向上滚 > 0，Firefox向下滚 > 0

//滚轮放大或缩小，基于Prototype 1.6

var scrollfunc = function(event) {

var direct = 0;

if (event.wheelDelta) {

direct = event.wheelDelta > 0 ? 1 : -1;

} else if (event.detail) {

direct = event.detail < 0 ? 1 : -1;

}

zoom(direct);

};

Event.observe(document, 'mousewheel', scrollfunc);

Event.observe(document, 'DOMMouseScroll', scrollfunc); //firefox

2.==========================================

代码:

function wheelEvent(obj, handle){

this.handle = handle;

// different events between Firefox and 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 using `wheelDelta` IE using `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 实现滚动条的功能