在js中容易出現的兼容性易錯問題-js教程-PHP中文網

首頁

web前端

js教程

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

亚连

Jun 20, 2018 pm 02:55 PM

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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。