前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >鼠标滚轮事件介绍

鼠标滚轮事件介绍

作者头像
欲休
发布2018-03-15 14:03:32
3K0
发布2018-03-15 14:03:32
举报
文章被收录于专栏:前端杂货铺

简介

  IE6实现了鼠标滚轮事件mousewheel,这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这

个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120,向下为-120.随后Chrome,Opera,

Safari等也都实现了该事件。Opera10之前的版本对wheelDelta值的符号处理错误,需要修改。但是Firefox没

有该事件,而是用DOMMouseScroll。这个事件只有Firefox支持,所以可以单独针对Firefox做兼容。

  另外,HTML5为了兼容这两个事件,另外规定了一个标准版本wheel事件,比较新的浏览器基本实现了该事件。

chrome31+,Firefox 17+,IE9+,Safari 7.0.5以及新版使用webkit内核的Opera,使用Carakan内核的Opera

并不支持该事件。wheel事件有deltaX、deltaY和deltaZ属性,默认为100.

  综上,目前wheel事件的兼容性其实并不理想,mousewheel的兼容性最佳,适用于除Firefox外的所有浏览器,对于

Firefox则单独做兼容处理。

代码语言:javascript
复制
 1 addEvent = function(type,callback,useCapture){
 2     if(window.addEventListener){
 3         this.addEventListener(type,callback,!!useCapture);
 4     }else if(window.attachEvent){
 5         this.attachEvent('on'+type,callback);
 6     }
 7     return callback;
 8 }
 9 wheel = function(el,callback){
10     var type = 'mousewheel';
11     try{
12         document.createEvent('MouseScrollEvents');
13         type = 'DOMMouseScroll';
14     }catch(e){}
15     el.addEvent = addEvent;
16     el.addEvent(type,function(e){
17         e = e || window.event;
18         var wheelDelta,delta;
19         if('wheelDelta' in e){
20             wheelDelta = e.wheelDelta;  // 正数向上滚动
21             if(window.opera && window.opera.version() < 10){
22                 e.delta = parseInt(-wheelDelta) / 120;  // safari 下的wheeldelta为浮点数
23             }
24             e.delta = parseInt(wheelDelta) / 120;
25         }else if('detail' in e){
26             e.wheelDelta = -e.detail * 40; //修复firefox下没有wheelDelta的bug,detail为+-3
27             e.delta = e.wheelDelta / 120;
28         }
29         callback.call(el,e);
30         //阻止向上冒泡
31         e.stopPropagation && e.stopPropagation();
32         if("stopBubble" in e) e.stopBubble = true;
33         return false;
34     },false);
35 };
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档