Javascript中的onmousewheel事件
來源：程序員人生 發布時間：2014-03-28 22:01:01 閱讀次數：2672次
相信用戶在瀏覽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 (obj.attachEvent) //if IE (and Opera depending on user setting)
obj.attachEvent("on"+mousewheelevt, handler, useCapture);
else if (obj.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事件。
本文演示：點擊查看
文章轉自：http://www.denisdeng.com/
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
