js中常見的兼容問題

1. 非行內樣式獲取

高級瀏覽器：

 

getComputedStyle(obox.false)//獲取全部屬性

 

IE瀏覽器

obox.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.事件對象的兼容

 var e=eve||window.event

3.事件源的兼容

e.target||e.srcElement

4.事件冒泡的兼容

高級瀏覽器

e.stopPropagation()

IE

e.cancelBubble = true;

兼容寫法

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

5.獲取鍵盤按下的值

var code = e.keyCode||e.which

6.阻止默認事件

高級瀏覽器

e.preventDefault()

IE

e.returnValue = false

兼容寫法

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

7.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;
       }
   }

8.window對象的屬性：

 

window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth//可視區域的寬度：

window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight//可視區域的高度度：

document.documentElement.scrollTop || document.body.scrollTop//頁面滾動條距離頂部的距離：

document.docimentElement.scrollLeft || document.body.scroll Left//頁面滾動條距離左邊的距離：