相容 監聽事件 監聽滾動事件

相容 監聽事件

主要以滾動事件為例

在敲代碼時候會發現個問題

----場景是全屏滾動，其中某個頁會通過點選事件，出現一個固定的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
 }
           

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