T O P

[资源分享]     浏览器兼容 – 事件兼容(1): 鼠标滚轮事件的firefox兼容

  • By - 楼主

  • 2021-01-08 12:40:01
  •  

    时代的印记,在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;
            }
        }
    }

     

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册