js的一些兼容融性问题

Posted 2020-11-21 fuxiaoyon

　　　1.非行内样式获取

　　　　高级浏览器

　　　getComputedStyle(obox.false)//获取所有属性

　　　　ie浏览器

　　box.currentStyle//获取所有属性

　　　　兼容写法

　　function getStyle(ele,attr){//ele为获取元素，attr为属性。
 　　　　　　　var a = "";
 　　　　　　　if(ele.currentStyle){
　　　　　　　　　　 a = ele.currentStyle[attr];
 　　　　　　　}else{
 　　　　　　　　　　a = getComputedStyle(ele,false)[attr];
 　　　　　　　}
　　　　　　　　　　 return a; 
　　　　　　　}

　　2.事件冒泡的兼容

　　高级浏览器

　　e.stopPropagation()

　　ie浏览器

　　e.cancelBubble = true;

　　兼容写法

   function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }

　　3.阻止默认事件

　　高级浏览器

　e.preventDefault()

　　ie浏览器

　e.returnValue = false

　　兼容写法

　　function stopDefault(e){
        if(e.preventDefault){
            e.preventDefault()
        }else{
            e.returnValue = false;  
        }
 　 }

　　4.DOM2级绑定事件

　　高级浏览器

　　obox.addEventListener("click",fn)

　　ie浏览器

　　obox.attachEvent("onclick",fn)

　　兼容写法和删除兼容

//绑定兼容写法
addEvent(obox,"click",fn1)
     function fn1(){
         console.log(1)
     }
    function addEvent(ele,type,cb){
        if(ele.addEventListener){
            ele.addEventListener(type,cb)
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,cb)
        }else{
            ele["on"+type] = cb;
        }

    }


 //删除的兼容
removeEvent(obox,"click",fn1)
   function removeEvent(ele,type,cb){
       if(ele.removeEventListener){
           ele.removeEventListener(type,cb)
       }else if(ele.detachEvent){
           ele.detachEvent("on"+type,cb)
       } else{ele["on"+type] = null;
       }
   }

　6.ajax的兼容

　　var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");

　7.获取滚动条距离

var sTop = document.documentElement.scrollTop || document.body.scrollTop

　8.鼠标编码的兼容

function getButton(evt){
    var e = evt || window.event;
    if(evt){
        return e.button;
    }else if(window.event){
        switch(e.button){
            case 1 : return 0;
            case 4 : return 1;
            case 2 : return 2;
        }
    }
}

　9.获取键盘编码的兼容

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