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 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
JS实现旋转木马轮播图
Jan 01 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 print类函数使用总结
2010/06/25 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
js实现tab切换效果
2017/02/16 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python机器学习之神经网络(一)
2017/12/20 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
美发活动策划书
2014/01/14 职场文书
红高粱观后感
2015/06/10 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
HTML中的表格元素介绍
2022/02/28 HTML / CSS
OpenFeign实现远程调用
2022/08/14 Java/Android