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 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
Prototype框架详解
Nov 25 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
vue-cli —— 如何局部修改Element样式
Oct 22 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里的JS打印函数
2006/10/09 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
js实现抽奖功能
2020/11/24 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
详解python调度框架APScheduler使用
2017/03/28 Python
wxpython绘制圆角窗体
2019/11/18 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
电气工程自动化求职信
2014/03/14 职场文书
会计求职信范文
2014/05/24 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
设备技术员岗位职责
2015/04/11 职场文书
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js