js中鼠标滚轮事件详解

(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/

之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题

附加事件

其中经我测试,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>

另一篇文献参考

时间: 2024-10-10 02:40:14

js中鼠标滚轮事件详解的相关文章

JS鼠标滚轮事件详解

鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该方法 window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;//W3C //统一处理滚轮滚动事件 function whe

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang

C# 中的委托和事件详解

C# 中的委托和事件 文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,在VS2003下会报错,解决办法是显式的创建一个委托类型的实例(委托变量).例如:委托类型 委托实例 = new 委托类型(方法名); 引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易

HTML中鼠标滚轮事件onmousewheel处理

滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍. Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel.滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta.不知道为何在该问题上其他厂商和微软的如此一致.Firefox可

使用JS实现鼠标滚轮事件

网站需要实现鼠标滚轮滚一下,页面向下滑向下一个锚点,由于前面有个一样式必须用jQuery1.3.2,而好多滚轮事件都使用了更高版本的jQuery,于是就从网上找了找 <script type="text/javascript"> var sel_index = -1 var sel_max = $(".billboard-hero").length - 1; function handle(delta) { var s = delta + ":

Vue.js中学习使用Vuex详解

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取.进行修改,并且你的修改可以得到全局的响应变更.下面咱们一步一步地剖析下vuex的使用:首先要安装.使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex : npm install vuex --save 然后 在src文件目录下新建一个名为store的文件

JS中的this用法详解

随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用法,下面这篇文章来详细探讨下: 1.this是啥? 简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this到底指啥东西却让很多人张二摸不着头脑.这里我们留个小悬念,希望看完这篇文章了你能回答出来this到底指什么. 2.this有啥用?

js中时间new Date()详解以及实例

介绍 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1; myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) m