JS鼠标滚轮事件详解

鼠标滚轮事件

//兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所有我也没有必要修改了
//判断鼠标滚轮滚动方向
if (window.addEventListener)//FF,火狐浏览器会识别该方法window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;//W3C
//统一处理滚轮滚动事件
function wheel(event){var delta = 0;if (!event) event = window.event;if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”delta = event.wheelDelta/120; if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”delta = -event.detail/3;
    }if (delta)handle(delta);
}
//上下滚动时的具体处理函数
function handle(delta) {if (delta <0){//向下滚动
            }else{//向上滚动
            }}

IE、chrome监听的是wheelDelta,向下滚动其值为-120；向上滚动其值为120

FF监听的是detail,向下滚动其值为3；向上滚动其值为-3

jQuery写法

$(document).on('mousewheel DOMMouseScroll', onMouseScroll);
function onMouseScroll(e){e.preventDefault();var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;var delta = Math.max(-1, Math.min(1, wheel) );if(delta<0){//向下滚动console.log('向下滚动');}else{//向上滚动console.log('向上滚动');}
}

其他浏览器未测试

JS鼠标滚轮事件详解相关推荐

js中鼠标滚轮事件详解
<body style="height:2000px"><script type="text/javascript">var scrol ...
JS鼠标滚轮事件mousewheel实现翻页（记录）
JS鼠标滚轮事件mousewheel实现翻页(PPT?) 整体思路(趁还能看懂自己的代码) 1.我想模拟那些不用滚动条,像PPT一样滚动的页面,于是乎想到了mousewheel事件 2.我又想再页面右 ...
html js鼠标滚轮事件,JS事件-鼠标滚轮事件
之前学习了onmouseover,onmousedown等鼠标事件,今天来看看鼠标的滚轮事件,浏览器兼容一直是让人比较恶心的事情,今天就让我们将恶心进行到底,看看这个恶心的鼠标滚轮事件! 鼠标滚轮事件 ...
[js点滴]JavaScript事件详解
Event对象目录事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信.DOM支持大量的事件,本节介绍DOM的事件编程. EventTarget接口 DOM的事件操作(监听和触发),都 ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
鼠标滚轮事件及解决滚轮事件多次触发问题
转载:https://www.cnblogs.com/jjxhp/p/11736066.html#_label0 一.滚轮事件的 js 写法二.jQuery写法三.参考四.滚轮事件滚动过快,事件 ...
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
Js事件模型、事件详解
六.Js中的事件详解 A 事件流(event flow ) 事件模型分为两种:冒泡型事件.捕获型事件. 冒泡型(dubbed bubbling )事件:指事件按照从最精确的对象到最不精确的对象的 ...
java鼠标js触发事件吗,JavaScript鼠标事件是什么？JavaScript鼠标事件详解
js中是比较简单的语言,然而js的精髓就是js事件,这也是js当中最重要的部分,很多人对JavaScript鼠标事件是什么还不是很了解,下面我们对JavaScript鼠标事件进行详解. 一:在js中, ...

JS鼠标滚轮事件详解

JS鼠标滚轮事件详解相关推荐

最新文章

热门文章