js で発生しやすい互換性とエラーが発生しやすい問題

以下のエディターが、js の互換性とエラーが発生しやすい問題をまとめた記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。エディターをフォローして一緒に見てみましょう

1. 属性関連

通常、属性とプロパティは属性として参照されますが、実際には異なる概念です。

特徴 HTML テキストに表示されます。特性は要素のアウター HTML に必ず表示され、特性は要素ノードにのみ存在します。

属性 (プロパティ) は、ブラウザーに組み込まれている一部の機能を除き、他の属性操作には影響しません。 HTML テキスト。

1. IE6/7 は属性と特性を区別しません

他のブラウザーは属性と特性を区別しますが、IE67 では属性を削除するために属性名のみを使用できますが、これら 2 つは区別されません。名前は同じであることがよくありますが、必ず違いがあります。

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. 要素の特性のデフォルトの動作が異なります

たとえば、一部の古い Webkit ブラウザでは、チェックボックス/ラジオのデフォルト値がオンではなく、「」になっています。一部の古い Webkit ブラウザでは、select の最初の要素が選択されません。

2. スタイル操作

通常、スタイルには、インラインスタイルの取得と設定、要素の計算されたスタイルの取得が含まれます

1。ただし、他のブラウザはサポートしません

。

background-position-x/y を使用すると、画像の位置を簡単にグラデーションできます。これがサポートされていない場合は、背景位置属性の解析を使用して処理することを検討できます。

2. IE6/7 は不透明度属性をサポートしません

アルファフィルターを通じて同じ効果を実現できますが、要素の haslayout をトリガーすることを忘れないでください。

3. IE6/7/8 は、クローンによって生成されたノードに誤って一部の属性を継承させます

たとえば、背景を 1 つまたは 2 つ変更すると、それらも同時に変更されます。

4. 計算されたスタイルを取得するさまざまな方法

IE6/7/8 は elem.currentStyle を使用しますが、他のブラウザーは window.getComputedStyle 関数を使用します。

5. さまざまなピクセル化方法

ピクセル化とは、計算を容易にするために、単位がピクセルではない距離をピクセルに変換することを指します。厳密に言えば、これは互換性の問題ではありませんが、全般的に使用される可能性があります。 IE6/7/8では、elem.runtimeStyleをpixelLeftとともに使用して処理できます。

最新のブラウザでは width 属性を使用できます。

6. CSS を取得する際のいくつかのバグ動作

Webkti コア ブラウザでは、margin-right が頻繁に失敗します。

3. クエリ操作

クエリの受け渡しとは、いくつかの特徴的な文字列から要素の集合を見つけたり、要素が文字列を満たすかどうかを判断したりすることを指します。

1. IE6/7はIDと名前を区別しません

IE6/7でgetElementByIdとgetElementsByNameを使用すると、指定された値と同じIDまたは名前を持つ要素が同時に返されます。通常、名前はバックエンドによって合意されるため、JS を作成するときは、ID が名前と重複しないようにする必要があります。

2. IE6/7 は getElementsByClassName と querySelectorAll をサポートしていません

これら 2 つの関数は IE8 からサポートされるため、IE6/7 では実際には getElementByTagName のみを使用できます。

3. IE6/7 は getElementsByTagName('*') をサポートしていないため、非要素ノードを返します

* を使用しないか、自分でフィルターする関数を作成してください。

4. IE8 の querySelectorAll は属性セレクターに適していません

ほとんどすべてのブラウザーの事前定義属性には問題があるため、カスタム属性を使用するか、属性セレクターを使用しないようにしてください。

5. querySelectorAll は IE8 では疑似クラスをサポートしません

疑似クラスは非常に便利な場合もありますが、IE8 では、first、:last、:even、:odd、:eq、: がサポートされません。 nth、:lt、:gt は疑似クラスではないため、いかなる場合も使用すべきではありません。

6. IE9のmatches関数は、DOMツリー上にない要素を扱うことはできません

要素がDOMツリー上にない限り、それは間違いなくfalseを返します。それが不可能な場合は、単にもちろん、リフローを避けるために独自のマッチング関数を作成することもできます。

4.イベント運営

通常、JS の互換性について尋ねられると、最初の反応はattachEvent と addEventListener ですが、これら 2 つの関数の違いについてはまだ詳細が不明です。

1. イベントアクションオブジェクトは異なります

addEventListener はイベントがバブルアップされる現在のオブジェクトですが、attachEvent はウィンドウです。

。イベント パラメーター オブジェクトは異なります

attachEvent にバインドされた関数にはパラメーター e が含まれることに注意してください。ただし、ボタンなど、2 つのパラメーターの属性には多くの違いがあります。またはサポートページYなどはサポートされていません。

2. 邪悪なホイール イベント

ホイール イベントのサポートはめちゃくちゃです。ルールは次のとおりです:
IE6-11 chrome マウスホイール WheelDetla down-120 up 120

firefox DOMMouse詳細を下に 3 上にスクロール

Firefox ホイール detlaY ダウン 3 アップ - 3

IE9-11 ホイール デルタ Y ダウン 40 アップ -40

クローム ホイール デルタ Y ダウン 100 アップ -100

3. すべてのブラウザーのフォーカス/ブラー幸いなことに、ほとんどのブラウザは focusin/focusout イベントをサポートしていますが、Firefox はこれさえサポートしていません。

IE678 では送信イベントがバブルアップしません。

IE678 では、変更イベントはブラーされるまでトリガーされません。

そして、これら 3 つの問題を解決する有効な手段はなく、シミュレーションをトリガーすることによってのみ対処できます。

4. a.click()

このメソッドは、デフォルトの動作がブロックされていても、多くのブラウザでは安全ではありません。

5. ノード操作

ノード操作とは通常、ノードのコピー、生成、またはノードの位置の移動を指します。

1.. innerHTML

IE6/7/8 で innerHTML を使用する場合、先頭にテキスト ノードがなければなりません。そうしないと、多くのタグが失われます。さらに、多くの場合、innerHTML を使用すると、defaultValue 属性でエラーが発生します。

2. 役に立たない tbody

IE6/7/8 は、空の tbody を空のテーブルに自動的に追加します

3. cloneNode が、バインディング イベントを記録する場合を除き、それ以外の場合は、それらを解くことはできないだろう。

上記は私があなたのためにまとめたものです。 関連記事:

Vue.js で再帰コンポーネントを使用してツリー メニューを構築する方法

PHP で JSONAPI を使用する方法

Parcel.js + Vue 2.x で非常に高速にゼロを実現する方法設定のパッケージ化

Vue使用時にブラウザが戻るとbeforeRouteLeaveがトリガーできない問題

fastclickコードの「クリックスルー」タップを解決する方法

以上がjs で発生しやすい互換性とエラーが発生しやすい問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。