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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
js用图作提交按钮或超连接
Mar 26 Javascript
跟我学习javascript的this关键字
May 28 Javascript
JavaScript设计模式初探
Jan 07 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
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实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
js tab 选项卡
2009/04/26 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
tab栏切换原理
2017/03/22 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
信息专业个人的自我评价
2013/12/27 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
企业2014年度工作总结
2014/12/10 职场文书
拾金不昧表扬信
2015/01/16 职场文书
绿里奇迹观后感
2015/06/15 职场文书
关于车尾的标语大全
2015/08/11 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle