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

​

 

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

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

 

  varmousewheelevt=(/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!')})

elseif(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即可。

 

functiondisplayDelta(e){

varevt =window.event ||e;

vardelta =evt.detail ?-evt.detail /3: evt.wheelDelta /120;

returndelta ;

}

 

 

 

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

 

functionwheel(obj, fn ,useCapture){

varmousewheelevt=(/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);

functionhandler(event) {

vardelta =0;

varevent =window.event ||event ;

vardelta =event.detail ?-event.detail/3 : event.wheelDelta/120;

if(event.preventDefault)

event.preventDefault();

event.returnValue =false;

returnfn.apply(obj, [event, delta]);

}

}