监听鼠标滚轮事件

鼠标滚轮在web开发中是比较常用的，比如地图的放大缩小，改变select框的值等，今天就这个写一下。
首先，不同的浏览器有不同的滚轮事件。大致分为两种：onmousewheel（除Firefox以外的浏览器支持）和DOMMouseScroll（只有Firefox支持）。在使用滚轮前首先要注册滚轮事件，注册方法也不同，Firefox采用addEventListener监听，其他浏览器直接采用onmousewheel监听，例：

//Firefox
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
//IE及其他浏览器
window.onmousewheel = document.onmousewheel=scrollFunc;

scrollFunc即为滚轮执行方法。
注册完成后再来说说滚轮返回值，判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。代码如下：

var scrollFunc = function(e){
e = e || window.event;
//IE/Opera/Chrome
if(e.wheelDelta){
if(parseInt(e.wheelDelta)>0){
ImageExpand();
}else{
ImageReduce();
}
}else if(e.detail){//Firefox
if(parseInt(e.detail)>0){
ImageReduce();
}else{
ImageExpand();
}
}
}

本例是滚轮实现图片放缩！！！

最后

以上就是从容康乃馨为你收集整理的监听鼠标滚轮事件的全部内容，希望文章能够帮你解决监听鼠标滚轮事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。