代码改变世界

js常见的11种兼容

2018-10-22 09:31  小花儿鹿  阅读(426)  评论(0编辑  收藏  举报

一、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;