html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。
不同浏览器不同的事件
首先,不同的浏览器有不同的滚轮事件。主要是有两种,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,其中正数表示为向上,负数表示向下。
具体的代码如下所示:
复制代码 代码如下:
滚动值:(IE/Opera)
滚动值:(Firefox)
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
通过运行上述代码我们可以看到:
复制代码 代码如下:
在非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;
}
http://www.dengb.com/Javascript/779514.htmlwww.dengb.comtruehttp://www.dengb.com/Javascript/779514.htmlTechArticle我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过js对鼠...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析相关推荐
- Java怎么监听鼠标滑轮的转向_javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...
- vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...
Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 + + - - v-on:dblclick 双击事件 ...
- iOS: 在Object-C中监听javascript事件( Javascript communicating back with Objective-C code)
在iOS开发之Objective-C与JavaScript交互操作 中我们可以通过stringByEvaluatingJavaScriptFromString 去实现在obj-C中获取到相关节点属性, ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript监听手机物理返回键的两种解决方法 参考文章: (1)JavaScript监听手机物理返回键的两种解决方法 (2)https://www.cnblogs.com/xzzzys/p/8 ...
- 鼠标案例2-鼠标移动监听
要完成: 监听:鼠标移动到label内,发生一些事情 移动到label外发生一些事情 重写移动函数文档:鼠标案例2-鼠标移动监听.note 链接:http://note.youdao.com/note ...
- 宽度发生变化事件监听_PyQt5(3) :实现登录 事件监听处理 程序逻辑功能和界面分离...
学习于: 学点编程吧:PyQt5图形界面编程(目录) 最终界面如下: 然后是代码: import sys from PyQt5.QtWidgets import QApplication, QWidg ...
- html js按钮事件监听,JS监听事件
对象 - JS监听事件 ¶ 作者:KK 发表日期:2016.2.21 在准备讲解后面的window对象之前,这里将话题转回来事件这里 平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样 ...
- html 页面自动滚动,js监听html页面的上下滚动事件方法
最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: Dom ...
- redis 能不能监听特定的key失效_php监听redis key失效触发回调事件
订单超时.活动过期解决方案:php监听redis key失效触发回调事件 Redis 的 2.8.0 版本之后可用,键空间消息(Redis Keyspace Notifications),配合 2.0 ...
最新文章
- java 线程交互_java 线程交互之wait/notify
- C#中Cache的使用
- 【C++模板】特化与偏特化 template [partial] specialization
- 股票代码前面为0,补齐6位数
- 微信帐号被封零钱怎么办?微信针对封停帐号的零钱提取出了一个流程
- 防脱洗发水是个伪命题?8979 条数据告诉你答案!
- 原生JS封装运动框架。
- java生成自定义标志、大小的二维码
- 零基础步入数据分析岗,应该怎么开始?
- datastore java_Java Datastore.find方法代码示例
- C++华氏温度和摄氏温度的转换
- App Tamer for Mac v2.6 应用CPU使用率管理
- 【MAX7800实现KWS20 demo演示】
- ISO认证是什么?| ISO体系认证办理
- win10 卸载linux子系统
- 无稳态多谐震荡器学习
- STM32F103频率计
- 一些常见网络安全术语
- 用Powerpoint (PPT)制作并导出矢量图、高分辨率图
- 南昌大学计算机就业能去哪,几所就业率高的211院校,考生毕业后就业不用愁!...