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

来源：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);
elseif(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]);
}
}

其他一些onmousewheel的用法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滚轮取值效果 -http://www.jb51.net/</title>
</head> <body>
<p><label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
<p><label for="detail">滚动值:(Firefox)</label><input type="text" id="detail" /></p>
<script type="text/javascript">
var oTxt=document.getElementById("txt");
/***********************
* 函数：判断滚轮滚动方向
* 作者：walkingp
* 参数：event
* 返回：滚轮方向 1：向上 -1：向下
*************************/
var scrollFunc=function(e){ var direct=0; e=e || window.event; var t1=document.getElementById("wheelDelta"); var t2=document.getElementById("detail"); if(e.wheelDelta){//IE/Opera/Chrome
        t1.value=e.wheelDelta; }else if(e.detail){//Firefox
        t2.value=e.detail; } ScrollText(direct);
}
/*注册事件*/
if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
</body>
</html>

注：“window.onmousewheel=document.onmousewheel”在chrome，opera，safari中会触发两次事件，可检测浏览器来区分。ie下仅支持“document.onmousewheel”事件。

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

也可以这样

if(document.attachEvent){document.attachEvent("on"+mousewheel, scrollFunc)}//ie
if(document.addEventListener){document.addEventListener(mousewheel, scrollFunc, false)}//Opera/Chrome/safari

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta){alert(e.wheelDelta);//IE/Opera/Chrome ±120

}
else if(e.detail){alert(e.detail)//Firefox ±3

}

转载于:https://www.cnblogs.com/huangyong8585/archive/2012/11/14/2770114.html

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

[JS] - onmusewheel事件(兼容IE,FF)
来源:http://www.denisdeng.com/?p=685 相信用户在浏览Google Map 时,都注意到向上或向下滚动鼠标可以使地图放大或缩小.其实,对于鼠标滚动我们并不陌生.但要给一个 ...
ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条
需要jquery库支持代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
JavaScript 触发click事件兼容FireFox，IE 和 Chrome
解决了火狐下无法触发click事件的问题 <script language="javascript">function test2(name){if(document. ...
纯CSS调整select选择框高度，兼容IE/Firefox/Opera/Safair/Chrome
在IE下直接用height.border定义select没有效果,目前大部分情况都是用js进行模拟,其实css也是可以做得到的,原理很简单,隐藏select选择框的原生边框,再用其他元素模拟内边距及边 ...
五大浏览器的历史、差异、对CSS和ES的支持内核：Trident、Gecko、Blink、Webkit 浏览器：IE Opera Safari Firefox Chrome
五大浏览器的历史.差异.对CSS和ES的支持内核:Trident.Gecko.Blink.Webkit 浏览器:IE Opera Safari Firefox Chrome 历史 Internet ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
各大浏览器兼容性报告 IE、FF、Safari、OP不同浏览器兼容报告
IE.FF.Safari.OP不同浏览器兼容报告分类:UI前端設計2011-12-05 17:01323人阅读评论(0)收藏举报 IE.FF.Safari.OP不同浏览器兼容报告 1浏览器内核简介 ...
IE、FF、Safari、OP不同浏览器兼容报告[转]
IE.FF.Safari.OP不同浏览器兼容报告 1 浏览器内核简介 Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos Fi ...
转载： IE、FF、Safari、OP不同浏览器兼容报告
(文章出处:http://blog.csdn.net/painsonline/article/details/7466777) IE.FF.Safari.OP不同浏览器兼容报告 1 浏 ...

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

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

最新文章

热门文章