javascript监听⿏标滚轮事件浅析
我们都见到过这些效果，⽤⿏标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对⿏标滚轮的事件监听来实现的。今天这⾥介绍的是⼀点简单的js对于⿏标滚轮事件的监听。
不同浏览器不同的事件
⾸先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不⽀持）和DOMMouseScroll（只有firefox ⽀持），关于这两个事件这⾥不做详述，想要了解的朋友请移步：⿏标滚轮(mousewheel)和DOMMouseScroll事件。
另外在操作的过程中需要添加事件监听，代码如下：兼容firefox采⽤addEventListener监听
复制代码代码如下:
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
js返回数值判断滚轮上下
判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五⼤浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使⽤detail，其余四类使⽤wheelDelta；两者只在取值上不⼀致，代表含义⼀致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表⽰为向上，负数表⽰向下。
具体的代码如下所⽰:
复制代码代码如下:
<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
e=e || window.event;
var ElementById("wheelDelta");
var ElementById("detail");
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
</script>
通过运⾏上述代码我们可以看到：
复制代码代码如下:
在⾮firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
⽽在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
代码部分如下，e.wheelDelta是判断是否为⾮firefox浏览器，e.detail为firefox浏览器
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
PS：这⾥再为⼤家推荐⼀款关于JS事件的在线查询⼯具，归纳总结了JS常⽤的事件类型与函数功能：javascript说明
javascript事件与功能说明⼤全：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。