鼠标滚轮事件介绍
时间:2022-05-04
本文章向大家介绍鼠标滚轮事件介绍,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简介
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则单独做兼容处理。
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 };
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 55. Vue webpack的基本使用
- ajax无刷新页面切换,历史记录后退前进解决方案
- 一起来学演化计算-SBX模拟二进制交叉算子和DE差分进化算子
- 通过与C++程序对比,彻底搞清楚JAVA的对象拷贝
- Spring - application.yml 数字读取错误、eg: 000001
- Swagger2 UI 提示"请确保swagger资源接口正确"解决办法
- Manytasking Jmetal 代码反向解析 2_MMDTLZ
- GitLab服务器搭建
- MATP1生成测试SolutionSet
- 以猜数字游戏引出的分治算法的理解与思考
- MATP ManyTask Multitask Problem 和 Solution 的变量范围
- Sinopia安装部署
- Nginx的405 not allowed错误解决
- Linux免密登陆
- 一起来学matlab-matlab学习笔记8 基本绘图命令_2基本绘图操作