Javascript滑鼠滾輪事件相容寫法

1.mousewheel事件(相容opera,chrome,safari,IE)

mousewheel事件對應的event物件包含一個wheelDelta屬性。使用者滾動滑鼠滾輪時，wheelDelta的值是正負120的倍數。

值得注意的是，在opera9.5之前的版本，wheelDelta的正負號是顛倒的，這裡不做考慮

一般情況下，監聽wheelDelta的正負值，就可以確定滑鼠滾輪的滾動方向。

document.addEventListener('mousewheel',function(event){
	console.log( event.wheelDelta > 0 )
},false)	
複製程式碼

2.DOMMouseScroll事件(相容FireFox)

FireFox支援一個名為DOMMouseScroll的類似事件，類比於mousewheel。不同的是，滑鼠滾輪的資訊儲存在detail屬性裡面。還有一點，使用者滾動滑鼠滾輪時，detail的值是正負3的倍數。

document.addEventListener('DOMMouseScroll',function(event){
	console.log( event.detail > 0 )
},false)
複製程式碼

3.跨瀏覽器相容寫法

var eventHandle = {
	getEvent: function(event){
		return event || window.event;
	},
	addEvent: function(element, type, handler){
		if(element.addEventListener){
			element.addEventListener(type, handler, false);
		}
		else if(element.attachEvent){
			element.attachEvent('on'+type, handler);
		}else{
			element['on'+type] = handler;
		}
	},
	getWheelDelta: function(event){
		return event.wheelDelta ? event.wheelDelta : (-event.detail)*40;
	}
}

function mouseHandle(event){
	event = eventHandle.getEvent(event);
	var delta = eventHandle.getWheelDelta(event);
	console.log( delta )
}


eventHandle.addEvent(document, 'mousewheel', mouseHandle);
eventHandle.addEvent(document, 'DOMMouseScroll', mouseHandle);
複製程式碼