JS常见的11种兼容

Posted 2021-01-14

一、scrollTop/Left的兼容

document.documentElement.scrollTop || document.body.scrollTop;

document.documentElement.scrollLeft || document.body.scrollLeft;

二、getElementsByClassName兼容（IE9以下)

function byClassName(obj,className){
　　if(obj.getElementsByClassName){
　　　　return obj.getElementsByClassName(className);
　　}else{
　　　　var arr = []; //放置获取到的相同class名的对象集
　　　　var eles = obj.getElementsByTagName(‘*‘); //获取所有的标签
　　　　//遍历所有的标签
　　　　for(var i = 0,len = eles.length;i < len;i ++){
　　　　　　//判断对象的类名是否我指定的类名
　　　　　　if(eles[i].className == className){
　　　　　　　　arr.push(eles[i]); //放到数组中
　　　　　　}
　　　　}
　　　　return arr;
　　}
}

三、获取class属性值的兼容

var attr = oDiv.getAttribute(‘class‘) == null ? oDiv.getAttribute(‘className‘) : oDiv.getAttribute(‘class‘);

四、获取非行内样式

function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
}

五、获取事件对象的兼容

var e = evt || window.event;

六、获取鼠标按键编码值的兼容

function getButton(evt){
    //获取事件对象的兼容
    var e = evt || window.event;
    if(evt){ //标准浏览器
        return e.button;
    }else if(window.event){ //IE
        switch(e.button){
            case 1 : return 0;
            case 4 : return 1;
            case 2 : return 2;
        }
    }
}

七、获取键盘按键编码值的兼容

evt.charCode || evt.keyCode || evt.which

八、阻止事件冒泡的兼容

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

九、阻止超链接的默认行为

evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;

十、添加/移除事件监听

function addEventListener(obj,event,fn,boo){
    if(obj.addEventListener){
        obj.addEventListener(event,fn,boo);
    }else{
        obj.attachEvent(‘on‘ + event,fn);
    }
}


function removeEventListener(obj,event,fn,boo){
    if(obj.removeEventListener){
        obj.removeEventListener(event,fn,boo);
    }else{
        obj.detachEvent(‘on‘ + event,fn);
    }
}

十一、获取事件源的兼容

var target = e.target || e.srcElement;