欢迎光临
我的个人博客网站

浏览器兼容 – 事件兼容(1): 鼠标滚轮事件的firefox兼容

 

时代的印记,在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 addMouseWheel(obj,fn,preventDefault){     //添加绑定     if(window.navigator.userAgent.toLowerCase().indexOf("firefox") != -1){         obj.addEventListener("DOMMouseScroll",fnWheel,false);       } else {         obj.onmousewheel = fnWheel;     }           function fnWheel(ev){         var oEvent = ev || event;         var bDown = true;//         if(oEvent.wheelDelta){//ie chrome             console.log(oEvent.wheelDelta)             bDown = oEvent.wheelDelta > 0 ? false:true;         } else {//ff             console.log(oEvent.detail)             bDown = oEvent.detail > 0 ? true:false;         }         (typeof fn == "function") && fn(bDown);         if(preventDefault){             oEvent.preventDefault && oEvent.preventDefault();             return false;         }     } }

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 浏览器兼容 – 事件兼容(1): 鼠标滚轮事件的firefox兼容
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏