Kompatibilitäts- und fehleranfällige Probleme, die in js leicht auftreten

Der folgende Editor wird mit Ihnen einen Artikel teilen, der einige Kompatibilitäts- und fehleranfällige Probleme in js zusammenfasst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Editor und werfen wir einen Blick darauf tatsächlich unterschiedliche Konzepte.

Merkmale (Attribute) werden im HTML-Text angezeigt, Änderungen an Attributen werden definitiv im äußeren HTML von Elementen angezeigt und Attribute existieren nur in Elementknoten;Eigenschaften werden verwendet Mit Ausnahme einiger integrierter Funktionen des Browsers wirken sich andere Eigenschaftsvorgänge nicht auf HTML-Text aus.

1. IE6/7 unterscheidet nicht zwischen Attributen und Merkmalen

Andere Browser unterscheiden nicht zwischen Attributen und Merkmalen, aber IE67 unterscheidet nicht zwischen ihnen Nur Features können mithilfe von Attributnamen gelöscht werden. Obwohl diese beiden Namen oft gleich sind, gibt es immer Unterschiede.

2. IE6/7 kann getAttribute/setAttribute nicht verwenden, um Funktionen zu bedienen, deren Wert kein String ist

In modernen Browsern gibt getAttribute definitiv den entsprechenden Wert in HTML zurück String, und das von IE67 zurückgegebene Ergebnis ist unvorhersehbar. Daher müssen wir unter IE67 AttributeNode verwenden, um Attribute zu bedienen.

3. IE6/7/8 kann CSS-Text nicht über das Stilattribut abrufen

Dieses Problem sollte die Folge davon sein, dass IE6/7 nicht zwischen Attributen und Merkmalen unterscheidet. Wenn Sie das style-Attribut verwenden, verwenden Sie einfach elem.style.cssText.

4. IE6/7 analysiert relative URLs in absolute URLs

Dieses Problem führt sogar dazu, dass das leere src-Attribut unter IE6/7 doppelte Anfragen generiert getAttribute('href/src', 4).

Das Standardverhalten von Elementfunktionen ist unterschiedlich.

In einigen alten Webkit-Browsern gibt es beispielsweise viele Fehler checkbox/radio Der Wert ist „“, nicht aktiviert. In einigen älteren Webkit-Browsern wird das erste Element der Auswahl nicht ausgewählt.

2. Stiloperationen

Normalerweise umfassen Stile das Abrufen und Festlegen von Inline-Stilen und das Abrufen berechneter Stile von Elementen

1. IE unterstützt Hintergrundposition-x/y, andere Browser jedoch nicht. Hintergrundposition-x/y kann verwendet werden, um die Position eines Bildes bequem zu ändern Da dies nicht unterstützt wird, können wir erwägen, das Parsing-Attribut „background-position“ zu verwenden, um damit umzugehen.

2. IE6/7 unterstützt das Opazitätsattribut nicht

Sie können den gleichen Effekt durch einen Alphafilter erzielen, denken Sie jedoch daran, das Haslayout des Elements auszulösen.

3. IE6/7/8 lässt fälschlicherweise zu, dass die vom Klon generierten Knoten einige Attribute erben.

Wenn Sie beispielsweise ein oder zwei Attribute ändern, werden sie dies tun gleichzeitig geändert werden.

4. Verschiedene Möglichkeiten, den berechneten Stil zu erhalten

IE6/7/8 verwendet elem.currentStyle, während andere Browser die Funktion window.getComputedStyle verwenden.

5. Verschiedene Pixelierungsmethoden

Pixelisierung bezieht sich auf die Umwandlung von Abständen, deren Einheiten keine Pixel sind, in Pixel, um Berechnungen zu erleichtern. Streng genommen handelt es sich hierbei nicht um ein Kompatibilitätsproblem, es kann jedoch allgemein verwendet werden. In IE6/7/8 können wir elem.runtimeStyle mit pixelLeft zur Verarbeitung verwenden.

Moderne Browser können das width-Attribut verwenden.

6. Einige BUG-Verhaltensweisen beim Abrufen von CSS

In Webkti-Kernbrowsern geht Margin-Right oft schief.

3. Abfrageoperation

Abfrageübergabe bezieht sich auf das Finden einer Reihe von Elementen anhand einiger charakteristischer Zeichenfolgen oder auf die Beurteilung, ob die Elemente Zeichenfolge erfüllen.

1. IE6/7 unterscheidet nicht zwischen ID und NameBei Verwendung von getElementById und getElementsByName unter IE6/7 wird dieselbe ID oder derselbe Name zurückgegeben gegebener Wert gleichzeitig. Da der Name normalerweise vom Backend vereinbart wird, sollten wir beim Schreiben von JS sicherstellen, dass die ID den Namen nicht dupliziert.

2. IE6/7 unterstützt getElementsByClassName und querySelectorAll nicht

Diese beiden Funktionen werden von IE8 unterstützt, daher können wir sie unter IE6/7 tatsächlich nur getElementByTagName verwenden .

3. IE6/7 unterstützt getElementsByTagName('*') nicht, wodurch Nicht-Element-Knoten zurückgegeben werden.

Verwenden Sie entweder kein * oder schreiben Sie eine Funktion um es selbst zu filtern.

4. querySelectorAll unter IE8 ist nicht für Attributselektoren geeignet

Bei fast allen im Browser vordefinierten Attributen gibt es Probleme.

5. querySelectorAll unterstützt keine Pseudoklassen unter IE8

Manchmal sind Pseudoklassen sehr nützlich, aber IE8 unterstützt sie nicht :first, : last, :even, :odd, :eq, :nth, :lt, :gt sind keine Pseudoklassen und wir sollten sie zu keinem Zeitpunkt verwenden.

6. Die Match-Funktion von IE9 kann keine Elemente verarbeiten, die sich nicht im DOM-Baum befinden.

Solange sich das Element nicht im DOM-Baum befindet, wird dies auf jeden Fall der Fall sein return false. Es ist wirklich unmöglich, das Element nach dem Abgleich im Körper zu löschen. Natürlich können wir auch unsere eigene Abgleichsfunktion schreiben, um einen Rückfluss zu vermeiden.

4. Veranstaltungsbetrieb

Wenn Leute nach der Kompatibilität von JS fragen, ist die erste Reaktion normalerweise attachmentEvent und addEventListener, aber es gibt immer noch viele Details über den Unterschied zwischen diesen beiden Funktionen.

1. Die Ereignisobjekte sind unterschiedlich

addEventListener ist das aktuelle Objekt, zu dem das Ereignis sprudelt, während attachmentEvent ein Fenster ist.

. Die Ereignisparameterobjekte sind unterschiedlich.

Beachten Sie, dass die an attachmentEvent gebundene Funktion nicht e = e || schreibt die beiden. Unterschiede, wie z. B. Schaltfläche oder Hexe, ob pageY unterstützt wird oder nicht usw.

2. Das böse Rad-Event

Die Unterstützung für Rad-Events ist ein Chaos, die Regeln sind wie folgt:
IE6-11 Chrome Mousewheel WheelDetla down- 120 nach oben 120

Firefox DOMMouseScroll Detail nach unten 3 nach oben-3

Firefox Wheel DetlaY nach unten 3 nach oben-3

IE9-11 Wheel DeltaY nach unten 40 nach oben-40

Chrome Wheel Delta Lower 100 Upper -100

Drei große Nicht-Blasen-Ereignisse

Die Fokus-/Unschärfe-Ereignisse aller Browser treten glücklicherweise nicht auf Die meisten Browser unterstützen Focusin/Focusout-Ereignisse, aber der verdammte Firefox unterstützt dies nicht einmal.

Das Submit-Ereignis wird unter IE678 nicht angezeigt.

Unter IE678 wird das Änderungsereignis erst ausgelöst, wenn es verschwimmt.

Und wir haben keine wirksamen Mittel, um diese drei Probleme zu lösen, wir können sie nur durch Simulationsauslösung lösen.

4. a.click()

Diese Methode ist in vielen Browsern nicht sicher, auch wenn das Standardverhalten blockiert ist . .

5. Knotenoperationen

Knotenoperationen beziehen sich normalerweise auf das Kopieren, Generieren eines Knotens oder das Verschieben der Position eines Knotens.

1.. innerHTML

Wenn IE6/7/8 innerHTML verwendet, muss ein Textknoten davor stehen, sonst gehen viele Tags verloren. Darüber hinaus führt die Verwendung von innerHTML in vielen Fällen zu Fehlern im Attribut defaultValue.

2. Nutzloser Tbody

IE6/7/8 fügt automatisch einen leeren Tbody zu einer leeren Tabelle hinzu

3 , wird das attachmentEvent-Ereignis

kopiert und wenn wir die von uns gebundenen Ereignisse nicht aufzeichnen, können wir die Bindung nicht aufheben.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erstellen Sie ein Baummenü durch rekursive Komponenten in Vue.js

So verwenden Sie JSONAPI in PHP

So erreichen Sie eine extrem schnelle Zero-Configuration-Verpackung in Parcel.js + Vue 2.x

Bei Verwendung von Vue kann die Browserunterstützung nicht ausgelöst werden beforeRouteLeave-Problem

So lösen Sie den Tap „Click Through“ im Fastclick-Code

Das obige ist der detaillierte Inhalt vonKompatibilitäts- und fehleranfällige Probleme, die in js leicht auftreten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!