兼容性问题

目录

注册事件的兼容性问题 addEventListener

事件处理对象的兼容性

处理移除事件的兼容性处理

获取页面滚动距离的浏览器兼容性问题

获取鼠标在页面的位置，处理浏览器兼容性

---

注册事件的兼容性问题 addEventListener

    // 处理注册事件的兼容性问题
    // eventName, 不带on，  click  mouseover  mouseout
    function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
      }
    }

 

事件处理对象的兼容性

var btn = document.getElementById('btn');
btn.onclick = function (e) {
// DOM标准中，是给事件处理函数一个参数
// e就是事件对象
// 在老版本的IE中获取事件对象的方式  window.event
// 处理事件对象的浏览器兼容性
e = e || window.event;
// 事件的阶段：1  捕获阶段   2  目标阶段  3 冒泡阶段    了解
// console.log(e.eventPhase);
// e.target  获取真正触发事件的对象  浏览器兼容问题
// 在老版本的IE中 使用 srcElement
// 处理兼容性问题
var target = e.target || e.srcElement;
console.log(e.target); 
// e.currentTarget  事件处理函数所属的对象this
console.log(e.currentTarget);
}

 

处理移除事件的兼容性处理

function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
  } else {
    element['on' + eventName] = null;
  }
}

 

获取页面滚动距离的浏览器兼容性问题

e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持

// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
 var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 return {
  scrollLeft: scrollLeft,
  scrollTop: scrollTop
  }
}

获取鼠标在页面的位置，处理浏览器兼容性

// 获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {
  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
  var pageY = e.pageY || e.clientY + getScroll().scrollTop;
  return {
    pageX: pageX,
    pageY: pageY
  }
}