鼠标滚轮事件

我们已经看到了这些效果,使用鼠标滚轮来实现窗体中数字的增加或减少,或者滚轮控制按钮的左右按钮,上下都是通过JS对鼠标滚轮的事件监控实现的,今天介绍的是一个简单的鼠标滚轮事件的JS监视器。

不同的浏览器和不同的事件

首先,不同的浏览器有不同的滚轮事件。主要有两种onmousewheel(支持火狐(Firefox)和dommousescroll只),这两个事件不在这里详细讨论,想了解的朋友:请移动鼠标滚轮(滚轮)和dommousescroll事件。
此外,在操作过程中,我们需要添加事件监视器。代码如下:Firefox兼容注册侦听器监测
将代码复制如下:事件注册
如果(文件。addEventListener){
Document.addEventListener('dommousescroll ',scrollfunc,假);
}
窗口。onmousewheel =文件。onmousewheel = scrollfunc; / / / /浏览器IE的歌剧

JS返回滚轮上下的数值判断。

确定在浏览器滚轮向上或向下也应考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)在Firefox的细节,剩下的四类wheeldelta;只有两个值是不一样的,细节和wheeldelta代表的意思一致,只有两个值,只有细节只需要wheeldelta + 3,+ 120,这是表示积极向上,向下的负数。
具体代码如下所示:
复制代码代码如下所示:
滚动值:
滚动值:(Firefox)

无功scrollfunc =功能(e){
E = e window.event | |;
VaR T1 = document.getelementbyid(wheeldelta );
VaR T2 = document.getelementbyid(细节);
如果(e.wheeldelta){ / / / /浏览器IE的歌剧
价值= e.wheeldelta T1;
} else if(e.detail){ / /火狐
价值= e.detail T2;
}
}
事件注册
如果(文件。addEventListener){
Document.addEventListener('dommousescroll ',scrollfunc,假);
}
窗口。onmousewheel =文件。onmousewheel = scrollfunc; / / / /浏览器IE的歌剧




通过运行上面的代码,我们可以看到:

复制代码代码如下所示:
在非Firefox浏览器中,滚轮卷起数字120并向下滚动到120。
在Firefox浏览器中,卷卷值为3,滚动到3。
代码段如下:e.wheeldelta是判断是非的Firefox浏览器,和e.detail是火狐浏览器
如果(e.wheeldelta){ / / / /浏览器IE的歌剧
价值= e.wheeldelta T1;
} else if(e.detail){ / /火狐
价值= e.detail T2;
}