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 document.createDocumentFragment()
Apr 04 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
深入学习JavaScript 高阶函数
Jun 11 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 URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP getName()函数讲解
2019/02/03 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
《胖乎乎的小手》教学反思
2014/02/26 职场文书
关于学习的演讲稿
2014/05/10 职场文书
安全负责人任命书
2014/06/06 职场文书
2014年技术员工作总结
2014/11/18 职场文书
营业用房租赁协议书
2014/11/26 职场文书
个人更名证明
2015/06/23 职场文书
学生安全责任协议书
2016/03/22 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL