鼠标滚轮事件及解决滚轮事件多次触发问题

72 阅读 0 评论 48 点赞

我是靠谱客的博主畅快秋天，最近开发中收集的这篇文章主要介绍鼠标滚轮事件及解决滚轮事件多次触发问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

转载：https://www.cnblogs.com/jjxhp/p/11736066.html#_label0
一、滚轮事件的 js 写法
二、jQuery写法
三、参考
四、滚轮事件滚动过快，事件触发两次

一、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;
//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
if (window.opera) delta = -delta;
} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
delta = -event.detail/3;
}
if (delta) { handle(delta) };
}
//上下滚动时的具体处理函数
function handle(delta) {
if (delta <0){//向下滚动
console.log("向下")
}else{//向上滚动
console.log("向上")
}
}

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('向上滚动');
}
}

三、参考

浅谈 Mousewheel 事件
js中鼠标滚轮事件详解
解析javascript中鼠标滚轮事件

四、滚轮事件滚动过快，事件触发两次

方案一：`arguments.callee.timer`

//判断鼠标滚轮滚动方向
if (window.addEventListener){
//FF,火狐浏览器会识别该方法
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;//W3C
//统一处理滚轮滚动事件
var throldHold = 200; //两次scroll事件触发之间最小的事件间隔
function wheel(event){
if(arguments.callee.timer) clearTimeout(arguments.callee.timer);
arguments.callee.timer = setTimeout(function(){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，且值为“正负120”
delta = event.wheelDelta/120;
//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
if (window.opera) delta = -delta;
} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
delta = -event.detail/3;
}
if (delta) { handle(delta) };
}, throldHold)
}
//上下滚动时的具体处理函数
function handle(delta) {
if (delta <0){//向下滚动
console.log("向下")
}else{//向上滚动
console.log("向上")
}
}

方案二：使用开关和延时器

//判断鼠标滚轮滚动方向
if (window.addEventListener){
//FF,火狐浏览器会识别该方法
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;//W3C
//统一处理滚轮滚动事件
var throldHold = 200; //规定时间
var flag = true; //规定时间内是否可以触发
var timer = null;
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
delta = -event.detail/3;
}
if( flag && delta ){
flag = false; //将开关设置为false，false期间内不能触发事件
handle(delta, childDomArr); //首次可以触发
timer = setTimeout(function(){
clearInterval(timer);
flag = true; //规定时间到大后，将开关设置为true
}, throldHold);
}
}
//上下滚动时的具体处理函数
function handle(delta) {
if (delta <0){//向下滚动
console.log("向下")
}else{//向上滚动
console.log("向上")
}
}