IE Javascript クリックの問題

StackOverflow https://stackoverflow.com/questions/102261

質問

まず、私は一般的なデバッグ ツールの一部が使用できないように書かれたアプリに取り組んでいます (または、少なくともその方法がわかりません :)。

JavaScript、HTML などはすべて「クック」され、エンコードされています (私はそう思います)。デプロイ前にプロセスがどのように機能するか少し曖昧なので、VS 2005 を IE にアタッチできず、firebug lite がうまく動作しません。また、インターフェイスはフレーム内にあるため (ヤバい)、他のいくつかのツールは同様に機能しません。

Firebug は Firefox では問題なく動作しますが、Firefox ではこの問題は発生しません (Safari も)。そのため、私のコードが IE で動作する方法に「明らかに」問題があることに誰かが気づいてくれることを期待しています。その奇妙さについてはさらに多くの情報がありますが、まずはこれから始めましょう。

基本的に、通常のテーブル行を非表示にして、テーブルをヘッダーに「折りたたむ」機能があります。私は持っている "onclick='toggleDisplay("theTableElement", "theCollapseImageElement")'" の中に <tr> タグとテーブルは「class='closed'」で始まります。

FF および Safari では 1 回のクリックでテーブルを折りたたんだり展開したりできますが、IE のテーブルを展開するには複数回のクリック (1 から 5 までの任意の数のように見えます) が必要です。場合によっては、最初に「開いた」後、しばらくの間、1 回のクリックでテーブルが展開したり折りたたまれたりしますが、最終的には複数回のクリックが必要な状態に戻ります。Visual Studio で少しだけ確認できることから、毎回実際に関数に到達していることがわかります。アドバイスをよろしくお願いします。

JSコードは次のとおりです。

bURL_RM_RID="some image prefix";
CLOSED_TBL="closed";
OPEN_TBL="open";
CLOSED_IMG= bURL_RM_RID+'166';
OPENED_IMG= bURL_RM_RID+'167';

//collapses/expands tbl (a table) and swaps out the image tblimg
function toggleDisplay(tbl, tblimg) {
    var rowVisible;
    var tblclass = tbl.getAttribute("class");
    var tblRows = tbl.rows;
    var img = tblimg;

    //Are we expanding or collapsing the table?
    if (tblclass == CLOSED_TBL) rowVisible = false;
    else rowVisible = true;

    for (i = 0; i < tblRows.length; i++) {
        if (tblRows[i].className != "headerRow") {
            tblRows[i].style.display = (rowVisible) ? "none" : "";
        }
    }

    //set the collapse images to the correct state and swap the class name
    rowVisible = !rowVisible;
    if (rowVisible) {
        img.setAttribute("src", CLOSED_IMG);
        tbl.setAttribute("class",OPEN_TBL);     
    }
    else {
        img.setAttribute("src", OPENED_IMG);
        tbl.setAttribute("class",CLOSED_TBL);
    }
}

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

役に立ちましたか？

解決

IE では setAttribute は信頼できません。属性アクセスとオブジェクト プロパティ アクセスは同じものとして扱われるため、「class」属性の DOM プロパティは「className」と呼ばれるため、IE では代わりにそれを使用する必要があります。

このバグは新しい IE8 ベータ版で修正されていますが、DOM レベル 1 HTML プロパティを直接使用する方が簡単です。

img.src= CLOSED_IMAGE;
tbl.className= OPEN_TBL;

スタイルシートでテーブルを折りたたむこともできます。これにより処理が速くなり、スクリプトでテーブルの行をループする手間が省けます。

table.closed tr { display: none; }

他のヒント

この行を変更してみましたか

tblRows[i].style.display = (rowVisible) ? "none" : "";

のようなものに

tblRows[i].style.display = (rowVisible) ? "none" : "table-row";

または

tblRows[i].style.display = (rowVisible) ? "none" : "auto";

onclick 呼び出しを実際の <tr> 個別ではなくタグ付け <th> タグ。こうすることで、HTML 内の JS が減り、メンテナンスが容易になります。

IE（ツール - >インターネットオプション - > Advanced）でスクリプトデバッグを有効にし、「デバッガー;」を配置する場合コードのステートメントでは、IEはデバッガーステートメントに当たったときにVisual Studioを自動的に紹介します。

IEではこれに関する問題が発生しました。私の記憶が正しければ、最初に生成された HTML に直接、「表示」スタイルの初期値を設定する必要がありました。例えば：

<table>
  <tr style="display:none"> ... </tr>
  <tr style="display:"> ... </tr>
</table>

そうすれば、JavaScript を使用してスタイルを、あなたがやっている方法を変更できるようになります。

私は常に style.display = "block" と style.display = "none" を使用します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top