浏览器兼容 – 事件兼容(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 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向下
  }
}

 

总结：一句话，浏览器兼容真坑！