[JS] - onmusewheel事件(兼容IE,FF)

来源：http://www.denisdeng.com/?p=685

相信用户在浏览Google Map 时，都注意到向上或向下滚动鼠标可以使地图放大或缩小。其实，对于鼠标滚动我们并不陌生。但要给一个元素绑定鼠标滚动事件，我们有必要对该事件有一个详尽的了解。

浏览器对该事件支持情况如何？IE6, Opera9+, Safari2+以及Firefox1+均支持“onmousewheel”事件，在FF 3.x中，与之相当的是“DOMMouseScroll”事件。“onmousewheel”作为事件名，不为其识别。所以，为了保证能在每个浏览器中都能运行，就需要针对不同的浏览器来绑定不同的事件。

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')})
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)

上面的代码给document绑定了mousewheel事件，并能在所有浏览器中运行。但是，鼠标每向上或向下移动一次，滚动了多少？当该事件触发时，在non-FF浏览器中，记录其距离的是“wheelDelta”，它返回的总是120的倍数（120表明mouse向上滚动，－120表明鼠标向下滚动）。在FF中，记录其滚动距离的是“detail”属性，它返回的是3的倍数（3表明mouse向下滚动，－3表明mouse向上滚动）。

需要注意的是，Opera 响应“onmousewheel”事件时，它同时拥有“wheelDelta”和“detail”属性。其“detail”属性返回的值与FF中相同。因此，对Opera 应该用“detail”属性来mouse滚动的距离。在触发滚动事件时，我希望得到整数1或－1。通过上面的分析，我们可以很轻松的得到我们想要的值，对于“wheelDelta”，只需要除以120，对于“detail”,将其除以3即可。

function displayDelta(e){
var evt = window.event || e;
var delta = evt.detail ? -evt.detail / 3 : evt.wheelDelta / 120;
return delta ;
}

有了上面的分析，我们可以构建自己的函数为一个对象绑定mousewheel事件。即：

function wheel(obj, fn ,useCapture){
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (obj.attachEvent) //if IE (and Opera depending on user setting)
obj.attachEvent("on"+mousewheelevt, handler, useCapture);
else if (obj.addEventListener) //WC3 browsers
obj.addEventListener(mousewheelevt, handler, useCapture);

function handler(event) {
var delta = 0;
var event = window.event || event ;
var delta = event.detail ? -event.detail/3 : event.wheelDelta/120;
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
return fn.apply(obj, [event, delta]);
}
}

在我写这篇文章时，jQuery已经开发了jquery.mousewheel插件。使用该插件无需过多的代码就可以很方便的为一个对象绑定mousewheel事件。

查看demo

相关资料

The onmousewheel event of JavaScript
onmousewheel Event
Mouse wheel programming in JavaScript

转载于:https://www.cnblogs.com/hcbin/archive/2010/10/30/1865287.html

[JS] - onmusewheel事件(兼容IE,FF)相关推荐

[JS] - onmusewheel事件(兼容IE,FF,opera,safari,chrome)
来源:http://www.denisdeng.com/?p=685 相信用户在浏览Google Map 时,都注意到向上或向下滚动鼠标可以使地图放大或缩小.其实,对于鼠标滚动我们并不陌生.但要给一个 ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
JS获取鼠标位置，兼容IE FF
JS获取鼠标位置,兼容IE FF 由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事 ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
JS的事件对象和事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象 ...
CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...
grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器
grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器时间:11-11-10所属栏目:前端效果来源: james.padolsey.com 点击:470次大小:0.04 MB 下 ...
js中事件捕获和事件冒泡
全栈工程师开发手册 (作者:栾鹏) js系列教程8-事件操作全解 js中事件捕获和事件冒泡其实不仅在js中,在面向对象的编程语言中或多或少涉及到这个问题.js编程的事件全解,你可以到我的主页,这里给 ...
彻底弄懂JS的事件冒泡和事件捕获
原文地址为: 彻底弄懂JS的事件冒泡和事件捕获在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题 ...

[JS] - onmusewheel事件(兼容IE,FF)

[JS] - onmusewheel事件(兼容IE,FF)相关推荐

最新文章

热门文章