Problèmes de compatibilité et sujets aux erreurs qui surviennent facilement dans js

L'éditeur suivant partagera avec vous un article résumant certains problèmes de compatibilité et sujets aux erreurs dans js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un coup d'œil

1. Liés aux attributs

Nous faisons généralement référence aux attributs et aux propriétés collectivement, mais ils le sont. en effet, des concepts différents.

Les caractéristiques (attributs) apparaîtront dans le texte HTML, les modifications des attributs apparaîtront certainement dans le HTML externe des éléments et les attributs n'existent que dans les nœuds des éléments ;

La propriété est utilisée pour modifier les objets JS. À l'exception de certaines fonctionnalités intégrées du navigateur, les autres opérations sur les propriétés n'affecteront pas le texte HTML.

1. IE6/7 ne fait pas de distinction entre les attributs et les caractéristiques

D'autres navigateurs feront la distinction entre les attributs et les caractéristiques, mais IE67 ne fait pas de distinction entre eux. seules les fonctionnalités peuvent être supprimées à l'aide de noms d'attributs. Bien que ces deux noms soient souvent identiques, il existe toujours des différences.

2. IE6/7 ne peut pas utiliser getAttribute/setAttribute pour faire fonctionner des fonctionnalités dont la valeur n'est pas une chaîne

Dans les navigateurs modernes, getAttribute renverra certainement la valeur correspondante en HTML. String, et le résultat renvoyé par IE67 est imprévisible, donc sous IE67, nous devons utiliser AttributeNode pour faire fonctionner les attributs.

3. IE6/7/8 ne peut pas obtenir de texte CSS via l'attribut de style

Ce problème devrait être la séquelle d'IE6/7 ne faisant pas la distinction entre les attributs et les caractéristiques. Lorsque vous utilisez l'attribut style, utilisez simplement elem.style.cssText.

4. IE6/7 analysera les URL relatives en URL absolues

Ce problème amène même l'attribut src vide sous IE6/7 à générer des requêtes en double que vous pouvez utiliser. getAttribute('href/src', 4).

5. Le comportement par défaut des fonctionnalités des éléments est différent

Il y aura de nombreux bugs de ce type. Par exemple, dans certains anciens navigateurs webkit, le comportement par défaut de. case à cocher/radio La valeur est "", pas activée. Dans certains anciens navigateurs Webkit, le premier élément de la sélection ne sera pas sélectionné.

2. Opérations de style

Habituellement, les styles incluent l'obtention et la définition de styles en ligne et l'obtention de styles calculés d'éléments

1. IE prend en charge background-position-x/y mais pas les autres navigateurs

background-position-x/y peut être utilisé pour dégradé facilement la position d'une image. n'est pas pris en charge, nous pouvons envisager d'utiliser l'attribut d'analyse background-position pour le gérer.

2. IE6/7 ne prend pas en charge l'attribut d'opacité

Vous pouvez obtenir le même effet via un filtre alpha, mais n'oubliez pas de déclencher la mise en page haslayout de l'élément.

3. IE6/7/8 laissera par erreur les nœuds générés par clone hériter de certains attributs

Par exemple, l'arrière-plan, si vous en modifiez un ou deux, ils le feront. être changé en même temps.

4. Différentes façons d'obtenir le style calculé

IE6/7/8 utilise elem.currentStyle tandis que d'autres navigateurs utilisent la fonction window.getComputedStyle.

5. Différentes méthodes de pixellisation

La pixellisation fait référence à la conversion de distances dont les unités ne sont pas des pixels en pixels pour faciliter les calculs. À proprement parler, il ne s’agit pas d’un problème de compatibilité, mais il peut être utilisé de manière généralisée. Dans IE6/7/8, nous pouvons utiliser elem.runtimeStyle avec pixelLeft pour le traitement.

Les navigateurs modernes peuvent utiliser l'attribut width.

6. Quelques comportements de BUG lors de l'obtention de CSS

Dans les navigateurs principaux de Webkti, la marge droite se passe souvent mal.

3. Opération de requête

La transmission de requête fait référence à la recherche d'un ensemble d'éléments à travers certaines chaînes caractéristiques ou à la détermination si les éléments satisfont à la chaîne.

1. IE6/7 ne fait pas de distinction entre l'identifiant et le nom

Lors de l'utilisation de getElementById et getElementsByName sous IE6/7, il renverra le même identifiant ou nom que le valeur donnée en même temps. Étant donné que le nom est généralement convenu par le backend, lorsque nous écrivons du JS, nous devons nous assurer que l'identifiant ne duplique pas le nom.

2. IE6/7 ne prend pas en charge getElementsByClassName et querySelectorAll

Ces deux fonctions sont prises en charge à partir d'IE8, donc sous IE6/7, nous pouvons réellement les utiliser uniquement getElementByTagName. .

3. IE6/7 ne prend pas en charge getElementsByTagName('*') et renverra les nœuds non-éléments

Soit ne pas utiliser *, soit écrire une fonction dans filtrez-le vous-même.

4. querySelectorAll sous IE8 n'est pas convivial pour les sélecteurs d'attributs

Presque tous les attributs prédéfinis du navigateur ont des problèmes. Essayez d'utiliser des attributs personnalisés ou aucun attribut.

5. querySelectorAll ne prend pas en charge les pseudo-classes sous IE8

Parfois, les pseudo-classes sont très utiles, mais IE8 ne les prend pas en charge :first, : last, :even, :odd, :eq, :nth, :lt, :gt ne sont pas des pseudo-classes et nous ne devons à aucun moment les utiliser.

6. La fonction matches d'IE9 ne peut pas gérer les éléments qui ne sont pas sur l'arborescence DOM

Tant que l'élément n'est pas sur l'arborescence DOM, il le fera certainement return false.Il est vraiment impossible de supprimer l'élément après la correspondance dans le corps. Bien sûr, nous pouvons également écrire notre propre fonction de correspondance pour éviter le reflux.

4. Opérations événementielles

Habituellement, lorsque les gens posent des questions sur la compatibilité de JS, la première réaction sera attachEvent et addEventListener, mais il existe encore de nombreux détails sur la différence entre ces deux fonctions.

1. Les objets événementiels sont différents

addEventListener est l'objet actuel vers lequel l'événement apparaît, tandis que attachEvent est une fenêtre.

. Les objets paramètres d'événement sont différents

Assurez-vous de noter que la fonction liée à attachEvent a le paramètre e. N'écrivez pas e = e || les deux différences, telles que le bouton ou la sorcière, si la page Y est prise en charge ou non, etc.

2. L'événement de la roue maléfique

Le support des événements de roue est un gâchis, les règles sont les suivantes :
Roue de la souris chromée IE6-11Detla down- 120 up 120

firefox DOMMouseScroll détail down 3 up-3

firefox wheel detlaY down 3 up-3

IE9-11 wheel deltaY down 40 up-40

roue chromée deltaY inférieur 100 supérieur -100

3. Trois événements majeurs sans bulle

Les événements de focus/flou de tous les navigateurs ne font pas de bulles. , la plupart de certains navigateurs prennent en charge les événements focusin/focusout, mais ce foutu Firefox ne le prend même pas en charge.

L'événement submit ne bouillonne pas sous IE678.

Sous IE678, l'événement de changement ne sera déclenché qu'après le flou.

Nous n'avons aucun moyen efficace pour résoudre ces trois problèmes, nous ne pouvons les traiter que par le déclenchement de simulations.

4. a.click()

Cette méthode n'est pas sûre dans de nombreux navigateurs. Une fois exécutée, même si le comportement par défaut est bloqué, la page sautera quand même. .

5. Opérations sur les nœuds

Les opérations sur les nœuds font généralement référence à la copie, à la génération d'un nœud ou au déplacement de l'emplacement d'un nœud.

1.. innerHTML

Lorsque IE6/7/8 utilise innerHTML, il doit y avoir un nœud de texte devant, sinon de nombreuses balises seront perdues. De plus, dans de nombreux cas, l'utilisation de innerHTML entraînera des erreurs dans l'attribut defaultValue.

2. Corps inutile

IE6/7/8 ajoutera automatiquement un corps vide à une table vide

3. , l'événement attachEvent

sera copié et à moins que nous enregistrions les événements que nous avons liés, nous ne pouvons pas les dissocier.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment créer un menu arborescent via des composants récursifs dans Vue.js

Comment utiliser JSONAPI en PHP

Comment obtenir un packaging extrêmement rapide sans configuration dans Parcel.js + Vue 2.x

Lors de l'utilisation de Vue, le support du navigateur ne peut pas se déclencher beforeRouteLeave Problem

Comment résoudre le problème du clic "clic" dans le code fastclick

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!