js鼠标滚轮事件(mousewheel/DOMMouseScroll)
来源:互联网 发布:mac excel solver在哪 编辑:程序博客网 时间:2024/05/14 07:01
简介:
鼠标滚轮事件主要分为FireFox派和其他派。
1、mousewheel与DOMMouseScroll
1、mousewheel
IE6首先实现了mousewheel事件。此后,Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta属性。当用户向上滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向下滚动鼠标滚轮时,wheelDelta是-120的倍数。
2、DOMMouseScroll
Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发。与mousewheel事件一样,DOMMouseScroll也被视为鼠标事件,因而包含于鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中,当向上滚动鼠标滚轮时,这个属性的值是-3的倍数,当向下滚动鼠标滚轮时,这个属性的值是3的倍数。火狐内核FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值,而其他浏览器是负值。
2、具体实现
1、javascript
<script> !function(){ varEventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }elseif(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+type]=handler; } }, getEvent:function(event){ returnevent?event:window.event; }, stopPropagation:function(event){ event=event||window.event; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } }; functionhandleMouseWheel(event){ EventUtil.stopPropagation(event); event=EventUtil.getEvent(event); varvalue=event.wheelDelta||-event.detail; vardelta=Math.max(-1,Math.min(1,value)); console.log(delta<0?'down':'up'); } EventUtil.addHandler(document,'mousewheel',handleMouseWheel); EventUtil.addHandler(document,'DOMMouseScroll',handleMouseWheel); }();</script>
2、jquery
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<scriptsrc="//static.ydcss.com/libs/jquery/1.11.2/jquery.js"></script><script> !function($){ $(document).on('mousewheel DOMMouseScroll',function(e){ //WebKit内核,Trident内核 => mousewheel //Gecko内核 => DOMMouseScroll e.preventDefault(); varvalue=e.originalEvent.wheelDelta||-e.originalEvent.detail; //e.originalEvent.wheelDelta => 120(up) or -120(down) 谷歌IE内核 //e.originalEvent.detail => -3(up) or 3(down) 火狐内核 vardelta=Math.max(-1,Math.min(1,value)); console.log(delta<0?'down':'up'); }); }(jQuery);</script>
阅读全文
0 0
- js鼠标滚轮事件(mousewheel/DOMMouseScroll)
- js鼠标滚轮事件(mousewheel/DOMMouseScroll)
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
- 鼠标滚动事件mousewheel(DOMMouseScroll)
- 鼠标滚轮事件----jquery-mousewheel
- mouseWheel in WindowsFormsHost(鼠标滚轮事件)
- html5鼠标滚轮事件mousewheel使用
- html5鼠标滚轮事件mousewheel使用
- DOMMouseScroll,onmousewheel 鼠标滚动事件js
- 【Js】鼠标滚轮事件
- js鼠标滚轮事件
- js 鼠标滚轮事件
- C# 中panel的mousewheel鼠标滚轮事件触发
- C#winform用鼠标滚轮控制图片大小,MouseWheel事件
- Winform 中panel的mousewheel鼠标滚轮事件触发
- 关于树的面试题
- 在不安装软件的情况下,转换文件格式
- Java_基础—流的标准处理异常代码1.6版本及其以前
- python3 中的 map,reduce,filter函数
- 解决在chrome中input出现黄色背景的问题
- js鼠标滚轮事件(mousewheel/DOMMouseScroll)
- 深入理解Java对象序列化
- React-引领未来的用户界面开发框架-读书笔记(五)
- POJ 1321:棋盘问题
- 分治算法小结
- 百练_2756:二叉树
- XMPP常用协议(三)
- Ubuntu下APACHE HTTPS安装和配置
- 《转载》gdb调试命令