js中的一些兼容性問題

js中的一些兼容性問題:

1 ）獲取滾動高度：

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

2 ）獲取樣式兼容：

window.getComputedStyle(element)[styleName]: 支持 IE9 及以上版本

解決方法：

function getStyle(dom, styleName){

return dom.currentStyle ? dom.currentStyle[styleName] : getComputedStyle(dom)[styleName];

}

3 ）事件對象兼容

window.event 只能在 IE 下運行，而不能在 Firefox 下運行 , 這是由於 Firefox 的 event 只能在事件發生的現場使用。 Firefox 必須從源處加入 event 做參數傳遞。 IE 忽略該參數，用 window.event 來讀取該 event 。

解決方法：

event = event || window.event;

4 ） event.pageX 和 event.pageY ：獲取鼠標相對於整個文檔的水平及垂直座標

event.pageX 和 event.pageY ， IE9 以前的版本不支持

　　解決方法：

　　　　event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);

　　　　event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);

5 ） 阻止事件冒泡兼容

　　stopPropagation() 和 cancelBubble ，前者是方法，是標準的寫法，後者是屬性，賦值 true 表示阻止，是 IE 的寫法。

　　解決方法：

　　　　判斷 stopPropagation是否存在，若是存在則用標準寫法不然則用IE的寫法，不可反過來判斷。

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

6 ）阻止默認行爲兼容

　　preventDefault() 和 returnValue() 前者標準寫法，後者 IE 寫法。

　　解決方法：

　　  （常規方法）event.preventDefault?event.preventDefault():event.returnValue=false;

　　　  或者（很是規方法）直接在事件處理程序中return false;

7 ）事件監聽兼容

　　標準瀏覽器的寫法 addEventListener() 和 IE 的寫法 attachEvent() 。

　　解決方法：

　　　　判斷 addEventListener是否存在，若是存在則用不然用IE8如下的版本（含IE8）的綁定方法attachEvent，removeEventListener()和detachEvent()也是同樣的用法。

　　　　if(document.all){

　　　　　　dom.attactEvent(「onclick」, fn);

　　　　} else {

　　　　dom.addEventListener(「click」, fn);

　　　　}

8）document.getElementByClassName() ：根據類名查找元素，返回集合（ IE9 及以上版本支持）

　　解決方法：

　　function getByClassName(className, context) {

       　　context = context || document;

       　　if (document.getElementsByClassName) // 瀏覽器支持使用 getElementsByClassName

             　　 return context.getElementsByClassName(className);

       　　/* 不支持使用 getElementsByClassName */

       　　// 保存查找到的元素的數組

      　　 var result = [];

       　　// 查找 context 後代的全部元素

       　　var allTags = context.getElementsByTagName("*");

       　　// 遍歷全部的元素

       　　for(var i = 0, len = allTags.length; i < len; i++) {

              // 獲取當前遍歷元素使用的全部 class 類名

              var classNames = allTags[i].className.split(" ");

              // 遍歷當前元素的全部類名，和待查找的類名比較

              for (var j = 0, l = classNames.length; j < l; j++) {

                     if (classNames[j] == className) { // 當前所在遍歷的元素是要查找出來的其中一個

                            result.push(allTags[i]);

                            break;

                     }

              }

       }

       // 返回查找結果

       return result;

}

9 ）事件目標對象兼容

IE 下 ,event 對象有 srcElement 屬性 , 可是沒有 target 屬性 ;Firefox 下 ,event 對象有 target 屬性 , 可是沒有 srcElement 屬性

　　解決方法：

　　var t = event.target || event.srcElement;

10) 獲取瀏覽器窗口大小的三種方法（瀏覽器的視口，不包括工具欄和滾動條）。

　　對於 Internet Explorer 、 Chrome 、 Firefox 、 Opera 以及 Safari ：

　　window.innerHeight – 瀏覽器窗口的內部高度

　　window.innerWidth – 瀏覽器窗口的內部寬度

　　對於 Internet Explorer 8 、 7 、 6 、 5 ：

　　document.documentElement.clientHeight

　　document.documentElement.clientWidth

　　或者

　　document.body.clientHeight

　　document.body.clientWidth

解決方法：

　　window.innerHeight || document.documentElement.clientHeight

　　window.innerWidth || document.documentElement.clientWidth