时代的印记，在W3C规范尚未形成，ECMAScript标准尚未建立的上古时代，各家浏览器厂商都形成了各自对JS的理解，继而各自打下各自的江山，建立各自的帝国。
正是因为各家浏览器对JS的理解和实现不同，继而导致了后续的各种不一致，逼得可怜的前端人不得不去兼容各种不同的浏览器。今次话题：WebKit内核浏览器、Gecko内核浏览器 的鼠标滚轮事件兼容
1、判定浏览器所属
既然是浏览器的兼容，那么肯定要先知道你所用的浏览器是什么浏览器
function getBrowserType() { var userAgent = navigator.userAgent; alert(userAgent); var isOpera = userAgent.indexOf("Opera") > -1; // Opera浏览器 var isIE10orLess = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; // IE10以下 var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1; // IE11 var isFirefox = userAgent.indexOf("Firefox") > -1; // 火狐浏览器 var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1; // Safari浏览器 var isChrome = // 谷歌浏览器 userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Edge") === -1; // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 var isEdge = userAgent.indexOf("Edge") > -1 && !isIE10orLess; // Edge浏览器 var trident = userAgent.indexOf("Trident") > -1; //IE内核 var presto = userAgent.indexOf("Presto") > -1; //opera内核 var webKit = userAgent.indexOf("AppleWebKit") > -1; //苹果、谷歌内核 var gecko = userAgent.indexOf("Gecko") > -1 && userAgent.indexOf("KHTML") === -1; //火狐内核 var mobile = !!userAgent.match(/AppleWebKit.*Mobile.*/); //是否为移动终端 var ios = !!userAgent.match(/\(i[^;]+;( userAgent;)? CPU.+Mac OS X/); //ios终端 var android = userAgent.indexOf("Android") > -1 || userAgent.indexOf("Adr") > -1; //android终端 var iPhone = userAgent.indexOf("iPhone") > -1; //是否为iPhone或者QQHD浏览器 var iPad = userAgent.indexOf("iPad") > -1; //是否iPad var webApp = userAgent.indexOf("Safari") === -1; //是否web应该程序，没有头部与底部 var weixin = userAgent.indexOf("MicroMessenger") > -1; //是否微信 （2015-01-22新增） var qq = userAgent.match(/\sQQ/i) === " qq"; //是否QQ var windowPhone = userAgent.indexOf("Windows Phone") > -1; if (isIE10orLess) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if (fIEVersion === 7) { return "IE7"; } else if (fIEVersion === 8) { return "IE8"; } else if (fIEVersion === 9) { return "IE9"; } else if (fIEVersion === 10) { return "IE10"; } else { return "0"; } //IE版本过低 } if (isIE11) { return "IE11"; } if (isFirefox) { return "Firefox"; } if (isOpera) { return "Opera"; } if (isSafari) { return "Safari"; } if (isChrome) { return "Chrome"; } if (isEdge) { return "Edge"; } } |
2、添加、移除鼠标滚轮事件
// 添加鼠标滚轮事件监听 function addMouseScrollEventListener() { let browserType = this.getBrowserType() if (browserType === 'Chrome' || browserType.includes('IE')) { // chrome and ie window.addEventListener('mousewheel', this.handleScroll, false) } else { // firefox window.addEventListener('DOMMouseScroll', this.handleScroll, false) } } // 移除鼠标滚轮事件监听 function removeMouseScrollEventListener() { let browserType = this.getBrowserType() if (browserType === 'Chrome' || browserType.includes('IE')) { window.removeEventListener('mousewheel', this.handleScroll) } else { window.removeEventListener('DOMMouseScroll', this.handleScroll) } } |
3、鼠标滚轮事件兼容
function handleScroll(ev) { var oEvent = ev || event; var bDown = true; //下 if (oEvent.deltaY) { // ie chrome // var direction = e.deltaY > 0 ? 'down' : 'up' // 该语句可以用来判断滚轮是向上滑动还是向下 bDown = oEvent.deltaY > 0; // 大于0向下 } else { // ff event事件对象内没有deltaY属性 bDown = oEvent.detail > 0; // 大于0向下 } } |
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
