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

转载：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("向上")}
}