javascript监听鼠标滚轮事件浅析


Posted in Javascript onJune 05, 2014

我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过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,其中正数表示为向上,负数表示向下。
具体的代码如下所示:

<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;

}

 PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

Javascript 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
JS中如何优雅的使用async await详解
Oct 05 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 #Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 #Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 #Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 #Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 #Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 #Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 #Javascript
You might like
PHP文件读取功能的应用实例
2015/05/08 PHP
ThinkPHP控制器详解
2015/07/27 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python代理抓取并验证使用多线程实现
2013/05/03 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
django的model操作汇整详解
2019/07/26 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Flask处理Web表单的实现方法
2021/01/31 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
简单而又朴实的个人求职信分享
2013/12/12 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
电焊工岗位职责
2014/03/06 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js