原生js兼容性问题

1. 获取标签样式的兼容性问题

1. getComputedStyle(node,null).value 不支持IE8以及以下
  第一个参数是节点对象,第二个参数是伪类,没有为null
2.node.currentStyle.vale 是IE专有的
function getStyleValue(node,propertyName){
    if(node.currentStyle)
        return node.currentStyle[propertyName];
    return getComputedStyle(node,null).[propertyName];
}

获取元素的样式

/**
 * @param ele 元素
 * @param attr 字符串的属性名(写完整)
 * @returns {*} 属性值.
 */
function getStyle(element,attribute){
    //能力检测
    if(element.currentStyle){
        //如果进到这里来了,说明当前浏览器支持currentStyle,说明当前的浏览器是ie8和ie8之前的版本.
        return element.currentStyle[attribute];
    }else {
        //如果进到这里来了.说明ele.currentStyle是undefined.说明当前的浏览器是谷歌或者火狐.
        return window.getComputedStyle(element,null)[attribute];
    }
}

2.获取节点的兼容性考虑

document.getElementsByClassName() 在IE8及以下有兼容性问题
  建议使用document.querySelector("")
  建议使用document.querySelectorAll("")

3.获取body的2种方式

标准 : document.body
火狐 : document.documentElement
    兼容性写法: 
    例如: var v = document.body.scrollTop||documentElement.scrollTop

4.获取页面滚出去的部分(top,left) 

/**
 * window.pageYOffset   谷歌 火狐
 * document.documentElement.scrollTop   ie8
 * @returns {{top: (Number|number), left: (Number|number)}}
 */
function getScroll(){
    return {
        scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    }
}

5.获取页面可视区的宽和高

/**
 * window.innerWidth  谷歌 火狐
 * document.documentElement.clientWidth  ie8
 * @returns {{clientWidth: (Number|number), clientHeight: (Number|number)}}
 */
function getClient(){
    return {
        clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
        clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    }
}

6.oninput的有兼容性問題---
7.事件对象有兼容性问题  event

其他版本
 .onclick = function(e){
}
在IE8 兼容性解决: window.event
兼容性写法 : 
document.keydowm = function(e){
     e=e||window.event;
     console.log(e);
}

8.事件目标的兼容性问题  traget

// 标准 : e.traget
//IE8兼容 : e.srcElement
document.keydowm = function(e){
     e=e||window.event;
     console.log(e.traget||e.srcElement);
}

   获取鼠标在页面上的位置

/**
 *ie8和ie8之前的浏览器,不支持e.pageX和e.pageY, 所以针对ie8及以前的浏览器要做计算.
 * @param e 事件对象
 * @returns {{pageX: (Number|number), pageY: (Number|number)}}
 */
function getEventPage(e){
    e = e || window.event;
    return {
        pageX: e.pageX || e.clientX + document.documentElement.clientLeft,
        //谷歌        ||           可视区clientX + 滚出去的部分(ie8).
        pageY: e.pageY || e.clientY + document.documentElement.clientTop
    }
}

9.阻止事件的默认行为的兼容性问题

标准 : e.preventDefault();
IE8:    e.returnValue =false
通用 : 在函数的最后面 return false;
兼容性写法 :

function	stopBubble(e) {
    e = e || window.event; 
    if(e.preventDefault) {
        //谷歌 火狐
        e.preventDefault();
    }else{
        //ie8及以前支持
        e.returnValue = false;
    }
}


比如：阻止默认动作 -- 阻止a标签跳转

/**
 * @param e
 */
function prEventValue(e) {
    e = e || window.event;
    if(e.preventDefault){
        //标准方法
        e.preventDefault();
    }else {
        //ie8及以前支持
        e.returnValue = false;
    }
}

10.阻止事件冒泡的兼容性问题

标准 : e.stopPropagation()
IE8 : e.cancelBubble=true;
兼容性写法: 
 if(e.stopPropagation)
     e.stopPropagation(); 
else 
    e.cancelBubble=true;

11.事件监听绑定的兼容性问题

标准 : 
        事件类型例如 : click mousemove等等,就是要去掉on
        绑定:  事件目标.addEventListener(事件类型,绑定事件,是否捕获)
        解绑 :  事件目标.removeEventListener(事件类型,解绑的函数)
        调用顺序: 先绑定的先执行
IE8 :  
        事件类型: 必须加上on ,例如 onclick,onmousemove
        绑定 : 事件目标.attachEvent(事件类型,绑定事件)
        解绑 : 事件目标 detachEvent(事件类型,解绑事件)
        调用顺序: 后绑定的先调用
        注意; 事件只能是冒泡,不支持捕获

兼容性写法: 
    /**
    *事件绑定函数
    * @param node : 事件目标
    * @param type:   事件类型
    * @param fn:       事件函数
    */
     function addEventListner(node,type,fn){
         if(node.addEventListener){
            node.addEventListener(type,fn);
        }else{
            type="on"+type;
            node.attachEvent(type,fn);
        }
    }
    /**
    *事件解除绑定函数
    * @param node : 事件目标
    * @param type:   事件类型
    * @param fn:       事件函数
    */
     function removeEventListener(node,type,fn){
         if(node.addEventListener){
            node.removeEventListener(type,fn);
        }else{
            type="on"+type;
            node.detachEvent(type,fn);
        }
    }
    

12.不同的浏览器,对同一个元素设置多个相同的事件,方式不一样,所以要做兼容处理

/**
 * @param obj  给谁设置事件
 * @param type  事件名称  string类型的
 * @param fn  事件处理程序
 */
function setAddEventListener(obj,type,fn){
    if(obj.attachEvent){
        //ie8及以前
        obj.attachEvent("on" + type,fn);
    }else if(obj.attachEvent == undefined){
        //谷歌 火狐等
        obj.addEventListener(type,fn,false);
    }else{
        obj["on" + type] = fn;
    }
}

13.移除事件在不同浏览器中,处理的方式不一样,所以要做兼容处理

/**
 * @param obj  给谁设置事件
 * @param type  事件名称  string类型的
 * @param fn  事件处理程序
 */
function setRemoveEventListener(obj,type,fn){
    if(obj.detachEvent){
        //ie8及以前
        obj.detachEvent("on" + type,fn);
    }else if(obj.detachEvent == undefined){
        //谷歌 火狐等
        obj.removeEventListener(type,fn,false);
    }else {
        obj["on" + type] = fn;
    }
}

14 .DOMContentLoaded 的兼容性问题
15.XMLHttpRequest兼容性问题
16.JSON 对象的兼容性问题
17. cc:ie6 emmic语法 显示iE的条件注释
18 .IE8以下.trim()会失效