其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件。
/*IE注册事件*/
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}
Firefox使用addEventListener添加滚轮事件
/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
detail与wheelDelta
判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
复制代码
1 <p><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
2 <p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p>
3 <script type="text/javascript">
4 var oTxt=document.getElementById("txt");
5 /***********************
6 * 函数:判断滚轮滚动方向
7 * 作者:walkingp
8 * 参数:event
9 * 返回:滚轮方向 1:向上 -1:向下
10 *************************/
11 var scrollFunc=function(e){
12 var direct=0;
13 e=e || window.event;
14
15 var t1=document.getElementById("wheelDelta");
16 var t2=document.getElementById("detail");
17 if(e.wheelDelta){//IE/Opera/Chrome
18 t1.value=e.wheelDelta;
19 }else if(e.detail){//Firefox
20 t2.value=e.detail;
21 }
22 ScrollText(direct);
23 }
24 /*注册事件*/
25 if(document.addEventListener){
26 document.addEventListener('DOMMouseScroll',scrollFunc,false);
27 }//W3C
28 window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
29 </script>
分享到:
相关推荐
之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题
ECharts鼠标事件的处理方法详解 事件是用户或浏览器自身执行的某种动作,如click、mouseover、页面加载完毕后触发load事件,都属于事件。 为了记录用户的操作和行为路径,需要完成鼠标事件处理和组件交互的行为...
C#中的事件与委托详解 C#中的事件与委托详解
并且在Cookie详解这篇文章中,介绍了如何在服务器端和使用JavaScript创建Cookie,并设置属性。 我们知道,Cookie是存储在客户端的,并且现在前后端分离慢慢变得流行起来,因此如何在浏览器上可以使用方便快捷的...
本文针对JavaScript 事件中“事件类型”下“焦点、鼠标和滚轮事件”的注意要点进行整理,分享给大家供大家参考,具体内容如下 一、焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性...
详解Python多线程Selenium跨浏览器测试
本文为大家分享了javascript跨浏览器事件处理机制,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨浏览器的事件处理程序</...
1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,...
JavaScript的浏览器对象详解
JS监控关闭浏览器操作的实例详解.docx
主要介绍了JavaScript焦点事件、鼠标事件和滚轮事件使用详解,通过示例给大家讲解的非常细致,有需要的小伙伴可以参考下。
主要介绍了js 实现一些跨浏览器的事件方法详解及实例的相关资料,需要的朋友可以参考下
详细介绍了使用ajax如何兼容各种浏览器
JavaScript中BOM和DOM详解 目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关...
学习js的事件详解,含原生及jquery实现。
javascript中event详解javascript中event详解javascript中event详解javascript中event详解javascript中event详解javascript中event详解javascript中event详解