js中判断鼠标滚轮方向的方法
2024-08-25 06:28:02
前 言
LiuDaP
最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!!
在介绍鼠标事件案例前,让我们先稍微了解一下js中的event对象
一、JS中的Event对象 |
Event对象:它代表的是事件的状态,例如可以表示鼠标的位置、鼠标按钮的状态、键盘按键的状态等等。
>>>事件通常与函数结合使用,函数不会在事件发生前被执行!
二、JS中如何判断鼠标滚轮方向 |
判断鼠标滚轮的方向,有着两个派别:一是谷歌、IE派别(这次IE没有搞特殊);二是火狐派别
>>>在谷歌、IE派别中,给我们提供了onmousewheel方法,该方法给我们提过了一个wheelDelta属性,该属性的返回值:正值与负值,其中正值表示滚轮向上滚动;负值表示滚轮向下滚动。
>>>而在火狐中,给我们提供了DOMMouseScroll方法,该方法给我们提供了一个detail属性,该属性的返回值:正值与负值,其中正值表示滚轮向下滚动;负值表示滚轮向上滚动。
>>>要注意的一点是:wheelDelta属性和detail属性的返回值都是正值与负值,但是两者表示滚轮的方向正好相反。。。
1 var scrollMouse=function(e){
2 e=e || window.event;
3 if(e.wheelDelta){ //判断浏览器IE,谷歌滑轮事件
4 if(e.wheelDelta>0){ //当滑轮向上滚动时
5 alert("滑轮向上滚动");
6 }
7 if(e.wheelDelta<0){ //当滑轮向下滚动时
8 alert("滑轮向下滚动");
9 }
10 }else if(e.detail){ //Firefox滑轮事件
11 if(e.detail>0){ //当滑轮向下滚动时
12 alert("滑轮向下滚动");
13 }
14 if(e.detail<0){ //当滑轮向上滚动时
15 alert("滑轮向上滚动");
16 }
17 }
18 }
19 //给页面绑定滑轮滚动事件
20 if(document.addEventListener){//firefox
21 document.addEventListener("DOMMouseScroll", scrollFunc, false);
22 }
23 //滚动滑轮触发scrollFunc方法 //ie 谷歌
24 window.onmousewheel=scrollMouse;
编者按
这个周末由于事情太多了,就给大家分享到这里吧,希望这一点点小知识能给大家带来一点点的帮助。。
最新文章
- 【Win10应用开发】自定义打印选项
- Node.js入门:包结构
- 20145215《Java程序设计》第1周学习总结
- 黄聪:阿里云Windows2012服务器IIS8实现wordpress完美伪静态(ISAPIRewritev)
- 《A First Course in Probability》-chape4-离散型随机变量-几种典型分布列
- vue.js源码精析
- Kafka官方文档翻译——设计
- python---os模块使用详解
- C#里调用 MysqlDB
- 机器学习在入侵检测方面的应用 - 基于ADFA-LD训练集训练入侵检测判别模型
- Keras RetinaNet github项目安装
- python3学习笔记及常见问题
- 后台管理系统好用的UI框架
- vue 路由配置
- jenkins安装部署全过程
- mysql对后空格不敏感 mysql数据库对空格的查询处理
- python字符串的基本用法
- 4.update更新和delete删除用法
- 史上最全面的Buffalo WHR-G300N CH v2 刷OpenWrt教程
- TFS二次开发09——查看文件历史(QueryHistory)
热门文章
- oracle pl/sql 分页
- hibernate学习手记(1)
- CentOS 7安装squid代理服务器
- pdf去水印
- “==”与";equals(object)";的区别
- python---os模块使用详解
- 深入理解C# 静态类与非静态类、静态成员的区别 [转载]
- Java面向对象 集合(上)
- 【网络爬虫入门02】HTTP客户端库Requests的基本原理与基础应用
- 四种Sandcastle方法生成c#.net帮助类帮助文档