JavascriptのDOM要素のクロスブラウザナビゲーション

Question

私のチームメイトは、HTMLページ内のDOM要素についてナビゲートした短い時間についていくつかのコードを書いていました。オブジェクト（そのデータを編集できるモーダル）。アイテムは、データベーステーブルから一般的に生成されます。

function showModal(editImage) { 
    var modal = document.getElementById('myModal'); 
    var span = document.getElementsByClassName("close")[0]; 
    var nameAndTitle = editImage.srcElement.parentElement.innerHTML; 
    var parent = editImage.srcElement.parentElement.parentElement; 
    etc.... 

問題は、Chromeで正常に機能しているかどうかだけです。コードはFirefoxでうまくいきませんでした。 firefoxでモーダルの1つを開こうとすると、コンソール出力 "TypeError：editImage.srcElementが定義されていません"

私の質問は、このデータにアクセスするためのより適切な方法どのブラウザーを使用しているか、使用しているブラウザーに応じて異なるブラウザーでその情報にアクセスする必要がありますか？

Answer 1

あなたの即時回答は：srcElementからtargetに変更してください。 Mozilla Developer Networkは、標準準拠をチェックするための非常に優れた（多くのうちの1つ）リソースです。 visit to their site（srcElement）は、それが非標準であり、正しい方法（target）で提案することを示します。

残念ながら、標準のAPIであっても、必ずしもすべてのブラウザで機能するとは限りません。通常、標準の一部はpiecemailで実装されています。信頼できる情報源を確認することは、どこで何がサポートされているかを知る上で不可欠です。

その他のリソース：

• World Wide Web Consortium（W3C）HTML、CSS、XMLおよび他の多く
• European Computer Manufacturer's Association（ECMA）のための

をチェックする迅速な互換性の遵守のためのJavaScript

CanIUse.comこだわり

明示的な質問：

"私の質問は、どのブラウザでも動作するこのデータにアクセスする"正しい "方法があるか、ブラウザによっては私がどのブラウザを使用しているかを確認し、その情報に違う方法でアクセスする必要があるかどうかです使用されています？"

標準を使用して、ブラウザ間のコードで最適な機会を得るためのサポートを確認します（前述のリソースを参照）。

あなたのコードは、（ブラウザ検出）を実行するかどうかを確認するために、ブラウザの種類とバージョンをチェックするコードを記述していないので：あまりにも多くのブラウザとあまりにも多くのバージョンがあります

1. - これは吸います！
2. ブラウザは、あなたが何であるかについてあなたに嘘をつくことができます！

不明な場合は「機能検出」を使用してください。フィーチャー検出は、フィーチャーが存在するかどうかを評価し、フィーチャーが存在する場合にフィーチャーを使用するコードです。そうでない場合、フォールバックが提供されます。ここでは、まだイベント処理のためのW3C標準をサポートしていませんでしブラウザは非常に一般的なIE8のための1（下）です：

// Here we are attempting to obtain the value of the 
// addEventListener property of the window object. 
// IE 8 doesn't implement this property so "undefined" 
// will be returned. But, because we are attempting to 
// use the value as the condition of an if/then construct 
// "undefined" will be converted to a boolean. "undefined" 
// is a "falsey" value, so it will convert to false. 
// This means that if the else portion of our construct 
// is reached, we have a browser that doesn't support 
// addEventListener 
if(window.addEventListener){ 
    // W3C standards are supported - do things the standard way 
    obj.addEventListener("click", someFunction, capture); 
} else { 
    // Must be IE 8 or less - do things the IE way 
    obj.attachEvent("onclick", someFunction); 
} 

これは、しかし、特徴検出を使用する1つの方法ですが、それは一般的に値を変換にかかっブール値詳細はこちらhereです。

Answer 2

その関数showModalはおそらくイベントリスナーであるため、引数editImageは実際にはEventオブジェクトです。

したがって、イベントソース（Firefoxでサポートされている唯一のもの）を報告する実際のプロパティはターゲットですが、srcElementはMicrosoftとWebkit/Blinkベースのブラウザで作成されたレガシープロパティです互換性。 Firefoxではなく。

要約：ターゲットを使用するか、Internet Explorerの古いバージョンをサポートする必要がある場合は、(editImage.target || editImage.srcElement)を試してみてください。

Answer 3

srcElementはIEです。標準プロパティはtargetです。

あなたはこれを行う必要があります。

var target = editImage.srcElement || editImage.target;