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 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
javascript打印输出json实例
Nov 11 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 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编码规范
2015/09/28 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python采集微信公众号文章
2018/12/20 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python如何生成xml文件
2020/06/04 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
庆六一活动总结
2014/08/29 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
党员年终个人总结
2015/02/14 职场文书
党支部培养考察意见
2015/06/02 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
react 路由Link配置详解
2021/11/11 Javascript
mysql序号rownum行号实现方式
2022/12/24 MySQL