[网摘]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) {
};
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 实现滚动条的功能