javascript监听鼠标滚轮事件浅析
2014-06-05 00:00
597 查看
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。
不同浏览器不同的事件
首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。
另外在操作的过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听
js返回数值判断滚轮上下
判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
具体的代码如下所示:
通过运行上述代码我们可以看到:
不同浏览器不同的事件
首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。
另外在操作的过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听
/*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
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 t1=document.getElementById("wheelDelta"); var t2=document.getElementById("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 window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome </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; }
相关文章推荐
- javascript监听鼠标滚轮事件浅析
- 关于JavaScript中监听鼠标滚轮事件
- javascript: 鼠标滚轮事件
- 鼠标的滚轮javascript事件
- JavaScript焦点事件、鼠标事件和滚轮事件使用详解
- javascript基础四 (事件应用鼠标滚轮)
- JavaScript焦点事件、鼠标事件和滚轮事件使用详解
- javascript 鼠标滚轮事件
- Javascript:DOM事件(监听鼠标点击/释放,鼠标悬停/离开等)
- JavaScript事件类型中焦点、鼠标和滚轮事件详解
- javascript实现禁止鼠标滚轮事件
- js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)
- 浅谈Javascript鼠标和滚轮事件
- JavaScript中的鼠标滚轮事件详解
- javascript实现禁止鼠标滚轮事件
- javascript 兼容鼠标滚轮事件
- 解析javascript中鼠标滚轮事件
- JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans
- JavaScript事件类型中焦点、鼠标和滚轮事件详解
- 深入浅析JavaScript中对事件的三种监听方式