兼容性问题

208 阅读1分钟

opacity ie8及以下不支持

兼容性写法:filter:alpha(opacity=50);

获取事件对象

e = event || window.event

获取事件触发对象

target = e.target || e.srcElement【非标准 ie6-8使用】

获取事件绑定对象

event.currentTarget ie678不认识 ,用this代替

绑定事件兼容性方案:

function addEventListener(element, eventName,fn){ 

    if(element.addEventListener){ 【ie8以下不支持】

        element.addEventListener(eventName, fn);

    }else if (element.attachEvent){

        element.attachEvent('on'+eventName, fn);

     }else{

         element['on' + eventName] = fn;   

     }

}

移除事件兼容性方案:

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.preventDefault 【ie 678低版本不支持】

e.returnValue   【ie 678】

解决:return false [缺点是return后面的代码不执行了,而且只限于传统的注册方式]

阻止事件冒泡:

e.stopPropagation() 【标准】

e.cancelBubble 【支持ie678】

兼容方案:

if(e & e.stopPropagation){

    e.stopPropagation();

}else{

    window.event.cancelBubble = true;

}

e.pageX  e.pageY 【IE9以上支持】

页面被卷去头部兼容性方案

function getScroll(){

    return {

        left: window.pageXoffset【ie 9开始支持】 || document.documentElement.scrollLeft || document.body.scrollLeft || 0,

        top: window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0

    }

}

DOMContentLoaded事件 ie9以上支持