兼容 监听事件 监听滚动事件

兼容 监听事件

主要以滚动事件为例

在敲代码时候会发现个问题
----场景是全屏滚动，其中某个页会通过点击事件，出现一个固定的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
 }

得到解决办法可行，已亲身实验过