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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 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
ADODB类使用
2006/11/25 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
Javascript玩转继承(一)
2014/05/08 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python 拼接文件路径的方法
2018/10/23 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
pandas分批读取大数据集教程
2020/06/06 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
保险专业求职信
2014/07/07 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
七年级语文教学反思
2016/03/03 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python