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

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

1. IE、chrome监听的是wheelDelta,向下滚动其值为-120；向上滚动其值为120
2. 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("向上")
  }
}