兼容 監聽事件 監聽滾動事件

兼容 監聽事件

主要以滾動事件爲例

在敲代碼時候會發現個問題
----場景是全屏滾動，其中某個頁會通過點擊事件，出現一個固定的video標籤覆蓋全屏

原代碼是這樣（具體哪裏抄的不太記得了）

if(document.addEventListener){
	document.addEventListener('DOMMouseScroll' , this.scrollHandler.bind(this) , false);
}
window.onmousewheel = document.onmousewheel = this.scrollHandler.bind(this);

這時候在火狐瀏覽器就會監聽不到滾動事件
排查了下問題，發現在video標籤出現之後排除菜單條的其他地方都會監聽不到滾動事件

所以我專門查看了一些關於這種全屏滾動的插件，參考了fullpage.js這個，裏面做出了以下兼容

// 兼容滾動事件
if (document.addEventListener) {
     document.addEventListener('mousewheel', this.scrollHandler.bind(this), false); // IE9, Chrome, Safari, Oper
     document.addEventListener('wheel', this.scrollHandler.bind(this), false); // Firefox
     document.addEventListener('MozMousePixelScroll', this.scrollHandler.bind(this), false); // old Firefox
 } else {
     document.attachEvent('onmousewheel', this.scroll.bind(this)); //IE 6/7/8
 }

得到解決辦法可行，已親身實驗過