提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript鼠标滚轮事件

JavaScript事件 鼠标 滚轮
2023-06-13 09:14:09 时间
今天在网上找来了响应滚轮的函数并改写成下面的类
复制代码代码如下:

functionwheelEvent(obj,handle)
{
this.handle=handle;
//differenteventsbetweenFirefoxandIE
window.addEventListener?obj.addEventListener("DOMMouseScroll",this.wheel,false):(obj.onmousewheel=this.wheel);
}
wheelEvent.prototype.wheel=function(event)
{
varev=event||window.event;
vardelta=ev.wheelDelta?(ev.wheelDelta/120):(-ev.detail/3);//Firefoxusing`wheelDelta`IEusing`detail`
eval("delta?"+parent.handle+"(delta):null;");
}

在使用的时候需要定义一个执行函数，用以根据从上述类中获得的值进行操作，并为指定的网页元素添加事件。比如
复制代码代码如下:

functionhandle(delta)
{
document.getElementById("text").scrollTop-=delta*20;
}
newwheelEvent(document.getElementById("text"),"handle");
在上例中第一个参数是添加滚轮事件的网页元素，id为text的div；第二个参数是执行函数的名字handle。
其中handle函数必须有且只有一个参数delta，滚轮往上滚时delta大于0，往下则小于0。上例handle函数的作用是用滚轮对div实现滚动条的功能

相关文章