原生JS的部分兼容处理

1.获取页面滚出去的部分(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
    }
}

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

/**
 * 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
    }
}

3.获取鼠标在页面上的位置

/**
 *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
    }
}

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

/**
 * @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;
    }
}

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

/**
 * @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;
    }
}

6.不同浏览器处理 阻止事件冒泡 的方式不一样,所以要兼容处理

/**
 * @param e
 */
function	stopBubble(e) {
    e = e || window.event;
    if(e.stopPropagation){
        //谷歌 火狐
        e.stopPropagation();
    }else {
        //ie8
        e.cancelBubble = true;
    }
}

7.阻止默认动作 -- 阻止a标签跳转

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

8.获取元素的样式

/**
 * @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];
    }
}