JS如何判断鼠标滚轮事件分析

 我来答
猴剖骋4
2013-11-07 · TA获得超过115个赞
知道答主
回答量:145
采纳率:0%
帮助的人:61.2万
展开全部
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过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,其中正数表示为向上,负数表示向下。 具体的代码如下所示: <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;}} /*监听事件*/
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式