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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
JavaScript Canvas实现验证码
Aug 02 Javascript
js实现随机8位验证码
Jul 24 Javascript
js实现微信聊天界面
Aug 09 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
基于vuex实现购物车功能
2021/01/10 Vue.js
Python中的CURL PycURL使用例子
2014/06/01 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
师范毕业生自荐信
2013/10/17 职场文书
安全员岗位职责
2013/11/11 职场文书
文明教师事迹材料
2014/01/16 职场文书
幼儿教师研修感言
2014/02/12 职场文书
办公设备采购方案
2014/03/16 职场文书
创意广告词
2014/03/17 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
实习生工作证明范本
2014/09/14 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android