分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

js中判断鼠标滚轮方向的方法

发布时间:2023-09-06 01:22责任编辑:傅花花关键词:js

  前  言

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; ???

编者按

  这个周末由于事情太多了,就给大家分享到这里吧,希望这一点点小知识能给大家带来一点点的帮助。。

js中判断鼠标滚轮方向的方法

原文地址:http://www.cnblogs.com/interesting-me/p/7786844.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved