JS中常见的兼容问题处理

1. 获取非行内样式的兼容

• 高级浏览器：getComputedStyle(元素,伪元素).CSS属性名
• IE浏览器：元素.currentStyle.CSS属性名
• 兼容处理：

  function getStyle(ele,attr){  // ele为元素；attr为属性
      if(ele.currentStyle){
          return ele.currentStyle[attr];
      }else{
          return getComputedStyle(ele, null)[attr];
      }
  }
  

2. 事件对象的兼容

• 高级浏览器：事件处理函数的第一个参数
• IE浏览器：寻找window对象身上的event
• 兼容处理：var e = eve || window.event;

  document.onclick = function(eve){
      var e = eve || window.event;
      console.log(e);
  }
  

3. 键盘事件的兼容

• 高级浏览器：eve.keyCode
• IE浏览器：eve.which
• 兼容处理：var kc = eve.keyCode || eve.which;

4. 阻止事件冒泡的兼容

• 高级浏览器：eve.stopPropagation();
• IE浏览器：eve.cancelBubble = true;
• 兼容处理：

  function stopBubble(e){  // e为事件对象的兼容处理；下同
      if(e.stopPropagation){
          e.stopPropagation();
      }else{
          e.cancelBubble = true;
      }
  }
  

5. 阻止默认事件的兼容

• 高级浏览器：e.preventDefault();
• IE浏览器：e.returnValue = false;
• 兼容处理：

  function stopDefault(e){
      if(e.preventDefault){
          e.preventDefault();
      }else{
          e.returnValue = false;
      }
  }
  

6. 事件目标的兼容

• 高级浏览器：e.target
• IE浏览器：e.srcElement
• 兼容处理：var tar = e.target || e.srcElement;

7. 监听式绑定事件（DOM2级事件绑定）与移除的兼容

• 监听式绑定事件的兼容

  • 高级浏览器：

    • 元素.addEventListener(事件类型,事件处理函数,布尔值);
    • btn.addEventListener("click",fn,false);
      • false：事件冒泡，默认值
      • true：事件捕获

  • IE浏览器：

    • 元素.attachEvent("on"+事件类型,事件处理函数);
    • btn.attachEvent("onclick",fn);
    • IE只支持事件冒泡，不支持事件捕获

  • 兼容处理：

    function addEvent(ele,type,cb){  // ele为元素；type为事件类型；cb为callback回调函数；下同
        if(ele.addEventListener){
            ele.addEventListener(type,cb,false);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,cb);
        }else{
            ele["on"+type] = cb;
        }
    }
    

• 移除监听事件的兼容

  • 高级浏览器：

    • 元素.removeEventListener(事件类型,事件处理函数,布尔值);
    • btn.removeEventListener("click",function(){},false);

  • IE浏览器：

    • 元素.detachEvent("on"+事件类型,事件处理函数);
    • ele.detachEvent("on"+type,cb);

  • 兼容处理：

    function removeEvent(ele,type,cb){
        if(ele.removeEventListener){
            ele.removeEventListener(type,cb,false);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,cb);
        }else{
            ele["on"+type] = null;
        }
    }
    

  • 注意：移除的事件处理函数和绑定的事件处理函数必须是同一个。