在js中容易出現的兼容性易錯問題

下面小編就為大家分享一篇總結js中的一些相容性易錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟著小編過來看看吧

一、屬性相關

我們通常把特徵(attribute)和屬性(property)統稱為屬性，但是他們確實是不同的概念，

特徵(attribute)會表現在HTML文本中，對特徵的修改一定會表現在元素的outerHTML中，並且特徵只存在於元素節點中；

屬性(property)是對於JS物件進行修改，除了瀏覽器內建的部分特徵外，其它的屬性操作並不會影響HTML文字。

1. IE6/7不區分屬性和特徵

其它瀏覽器會區分屬性和特徵，而IE67並不會區分它們，在IE67下我們只能用屬性名稱來刪除特徵，雖然這兩個名字很多時候一樣，但總是會有不一樣的地方。

2. IE6/7不能透過getAttribute/setAttribute來操作值不為字串的特徵

在現代瀏覽器中getAttribute一定會回傳HTML中對應的字串，而IE67回傳的結果不可預測，因此在IE67下，我們要用AttributeNode來操作屬性。

3. IE6/7/8不能透過style屬性來取得CSS文字

這個問題應當是IE6/7不區分屬性和特徵的後遺症，在獲取style這個屬性的時候，使用elem.style.cssText就好了。

4. IE6/7會解析相對URL成為絕對URL

#這個問題甚至導致了IE6/7下空的src屬性會產生重複的請求，可以使用getAttribute('href/src', 4)。

5. 元素特徵的預設行為不同

這一類的BUG會比較多，例如在一些舊的webkit瀏覽器裡面，checkbox/radio 的默認值為""，而不是on。在一些舊的webkit瀏覽器select的第一個元素不會被選取。

二、樣式操作

通常情況下，樣式包括取得和設定行內樣式以及取得元素的計算的樣式

1. IE支援background-position-x/y而其它瀏覽器不支援

background-position-x/y可以用來方便的漸層一個圖片的位置，在不支援的情況下我們可以考慮使用解析background-position屬性的來處理。

2. IE6/7不支援opacity屬性

可以透過alpha濾鏡來達到相同的效果，不過要記得觸發元素的haslayout。

3. IE6/7/8會錯誤的讓clone產生的節點繼承一些屬性

##例如background，修改一個兩個同時會改變。

4. 不同的取得計算樣式的方式

IE6/7/8使用elem.currentStyle而其它瀏覽器要用window.getComputedStyle函數。

5.不同的像素化方式

像素化指的是將單位不是像素的距離轉換成像素，以便進行計算。嚴格的說這不是相容性問題，但可能全用到。在IE6/7/8中，我們可以使用elem.runtimeStyle來配合pixelLeft來處理。

而現代瀏覽器可以使用width屬性處理。

6. 一些取得CSS時的BUG行為

在Webkti核心的瀏覽器中，margin-right常常會出錯。

三、查詢運算

查詢透過指的是透過一些特徵字串來找出一組元素，或是判斷元素是否滿足字串。

1. IE6/7不區分id和name

在IE6/7下使用getElementById和getElementsByName時會同時傳回id或name與給定值相同的元素。由於name通常由後端約定，因此我們在寫JS時，應保證id不與name重複。

2. IE6/7不支援getElementsByClassName和querySelectorAll

這兩個函數從IE8開始支援的，因此在IE6/7下，我們實際上可以用的只有getElementByTagName。

3. IE6/7不支援getElementsByTagName('*')會傳回非元素節點

要嘛不用*，要嘛自己寫個函數過濾一下。

4. IE8下querySelectorAll對屬性選擇器不友善

#幾乎所有瀏覽器預先定義的屬性都有了問題，盡量使用自訂屬性或不使用屬性選擇器。

5. IE8下querySelectorAll不支援偽類

#有時候偽類是很好用，IE8不支持，jquery提供的:first、:last、 :even、:odd、:eq、:nth、:lt、:gt並不是偽類，我們不要在任何時間使用它們。

6. IE9的matches函數不能處理不在DOM樹上的元素

只要元素不在dom樹上，一定會回傳false，實在不行把元素丟在body裡面配對完了再刪掉吧，當然了我們也可以自己寫匹配函數以避免回流。

四.事件操作#

通常一問大家JS的相容性，第一個反應都會是attachEvent和addEventListener，但關於這兩個函數的差別，還是有很多的細節。

1. 事件作用對像不同

addEventListener為事件冒泡到的目前對象，而attachEvent是window。

. 事件參數物件不同

一定要注意，attachEvent綁定的函式有參數e，不要再寫e = e || event了，不過兩者的參數屬性有很多的差別，如button還是witch，支援不支援pageY等等。

2. 萬惡的滾輪事件

滾輪事件的支援可謂是亂七八糟，法則如下：
IE6-11 chrome mousewheel wheelDetla 下-120 上120

firefox DOMMouseScroll detail 下3 上-3

firefox wheel detlaY 下3 上-3

IE9-11 wheel deltaY 下40 上-40

chrome wheel deltaY 下100 上-100

3. 三大不冒泡事件

所有瀏覽器的focus/blur事件都不冒泡，萬幸的是大部分瀏覽器支援focusin/focusout事件，不過可惡的firefox連這個都不支援。

IE678下submit事件不冒泡。

IE678下change事件要等到blur時才觸發。

而我們沒有什麼有效的手段去解決這三個問題，只能透過模擬觸發的方式來處理。

4. a.click()

這方法在很多瀏覽器下都不安全，一執行哪怕阻止了預設行為，還是會造成頁面跳轉。

五、節點運算

節點運算通常指的是複製、產生節點或移動節點的位置。

1.. innerHTML

IE6/7/8使用innerHTML時必須在前面有一個文字節點，不然會造成很多標籤遺失。另外很多情況下使用innerHTML會造成defaultValue屬性出錯。

2. 無用的tbody

IE6/7/8會給空的table自動加上空的tbody

3. cloneNode時會複製attachEvent的事件

並且除非我們記錄了我們綁定的事件，否則我們沒辦法解綁他們。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在Vue.js中透過遞歸元件如何建立樹狀選單

在PHP中如何使用JSONAPI

在Parcel.js Vue 2.x中如何做到極速零配置打包

使用Vue時瀏覽器後退無法觸發beforeRouteLeave的問題

在fastclick程式碼中如何解決tap「點透」

#

以上是在js中容易出現的兼容性易錯問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！