html中鼠标滚轮事件onmousewheel的处理方法


Posted in Javascript onNovember 11, 2016

滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍。

Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta。不知道为何在该问题上其他厂商和微软的如此一致。Firefox可以使用addEventListener方法绑定DomMouseScroll事件。

elem.addEventListener(‘DOMMouseScroll', func, false);IE和其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法,其他主流浏览器并不识别微软的这个方法。

Firefox 鼠标滚轮向上滚动是-3,向下滚动是3

IE 鼠标滚轮向上滚动是120,向下滚动是-120

Safari 鼠标滚轮向上滚动是360,向下滚动是-360

Opera 鼠标滚轮向上滚动是120,向下滚动是-120

Chrome 鼠标滚轮向上滚动是120,向下滚动是-120

有人在Safari下做了一些测试:”只是滚动一圈的话,值为+-0.1,如果滚动地稍微快点的话(多滚动几圈),这个值也会变大。 这是因为Mac OS下有鼠标滚轮加速功能。滚动一次,浏览器滚动1像素,滚动3次,浏览器却滚动30像素”。同时他也对Camino(基于Gecko的内核引擎)进行研究:“与Safari相似(+- 0.3 to +-Infinity),虽然使用了与firefox相同的内核引擎,但结果这个delta值却只在+-2.666666里浮动,无论滚动速度如何

其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件。

/*IE注册事件*/  
if(document.attachEvent){  
  document.attachEvent('onmousewheel',scrollFunc);  
}

Firefox使用addEventListener添加滚轮事件

 

/*Firefox注册事件*/  
if(document.addEventListener){  
  document.addEventListener('DOMMouseScroll',scrollFunc,false);  
}

 Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式

/*注册事件*/  
if(document.addEventListener){  
  document.addEventListener('DOMMouseScroll',scrollFunc,false);  
}//W3C  
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail与wheelDelta

判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、 Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。

<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p> 
<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p> 
<script type="text/javascript"> 
  var oTxt = document.getElementById("txt"); 
  var scrollFunc = function (e) { 
    var direct = 0; 
    ee = 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; 
    } 
    ScrollText(direct); 
  } 
  /*注册事件*/ 
  if (document.addEventListener) { 
    document.addEventListener('DOMMouseScroll', scrollFunc, false); 
  }//W3C  
  window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari  
<p></script></p>

以上就是小编为大家带来的html中鼠标滚轮事件onmousewheel的处理方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 #Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 #Javascript
通过扫描二维码打开app的实现代码
Nov 10 #Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 #Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
jquery日历插件e-calendar升级版
Nov 10 #Javascript
Vue.js开发环境搭建
Nov 10 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
医药代表个人的求职信分享
2013/12/08 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
如何正确理解python装饰器
2021/06/15 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript