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

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

鼠标滚轮事件及解决滚轮事件多次触发问题相关推荐

js 冒泡事件与解决冒泡事件
事件冒泡 :当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window . 代码: <div id="div1"> <div id=&quo ...
工作手记之移动端中文输入法触发oninput事件的解决方法
事件背景工作过程中涉及到了移动端输入内容长度的限定,这就要求需要对输入过程中内容的变化进行监控和判定,以决定是否可以继续输入,所以就想着是否可以在相关输入处监听oninput事件?但是在手机端,中文 ...
PyQt5 鼠标点击事件（点击响应事件可自定义）：鼠标单击、双击、滚轮滚动、释放、移动等
自己写通了最常用的鼠标事件,具体响应事件,大家可以自定义,实现的效果如下: 具体代码如下,有任何问题,欢迎小伙伴们交流讨论. # -*- coding: utf-8 -*- ""& ...
浅谈wheel滚轮事件（兼容触摸板多次触发）
wheel 滚轮事件一.事件说明当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件 Tips: 使用触摸板触发该事件,由于系统的平滑处理,会触发多次该事件 IE 下无法使用触摸板触发该事件替换 ...
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
滚轮事件和拖动滚动条事件
一.鼠标的滚轮事件触发: 鼠标的滚轮上下滑动的时候触发代码: // DOMMouseScroll:火狐 // onmousewheel:其他浏览器 if(window.addEventListen ...
微软鼠标水平滚轮失灵的解决方法
微软的人体工学鼠标,我一直在用,一是因为握着很舒服,二是因为他有左右的水平滚轮. 这个水平滚轮真是挺好用,可以上下翻也能左右翻,虽然目前只能微软的app应用(word.ppt.excel.visio等 ...
2020.11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件；鼠标与键盘事件变动事件模拟事件）
事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...
QT中事件与图形处理详细（鼠标、键盘、定时等事件与图片加载处理）
QT事件简介:QT程序是事件驱动的,程序的每个动作都是由内部某个事件所触发.QT事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. 常见的QT事件类型如下: 键盘事件: 按键按下和松开鼠标 ...

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

一、js

二、jQuery写法

三、参考

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

方案一：`arguments.callee.timer`

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

鼠标滚轮事件及解决滚轮事件多次触发问题相关推荐

最新文章

热门文章

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

一、js

二、jQuery写法

三、参考

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

方案一：arguments.callee.timer

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

鼠标滚轮事件及解决滚轮事件多次触发问题相关推荐

最新文章

热门文章

方案一：`arguments.callee.timer`

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