0

注:以前に同様の質問がありましたが、現在は削除しようとしています。問題は .NET Web ブラウザー コントロールに関係していると思いましたが、IE に関係しています。

次のコードは、クリックできる 3 つの項目を単純に表示する .htm ファイルの内容です。各アイテムがクリックされると、javascript メソッドがその背景を青に変更し、以前に選択したアイテムの背景を白に戻します。

IE8、9、および 10 でのみ発生する問題は次のとおりです。これは FF、chrome で動作し、IE10 開発者プレビューを使用して IE5 および IE7 で動作することを実証しました。

ITEM 1 をクリックし、次に ITEM 1.1 をクリックします - ITEM 1.1 は強調表示されていますが、ITEM 1 は強調表示されていません。

ただし (ドキュメント ツリーを上に移動):
ITEM 1 をクリックしてから ROOT - 問題ありません
ITEM 1,1 をクリックしてから ITEM 1 をクリックします - 問題ありません。

ここで、javascript selectElement(e) メソッドを最初に選択解除してから選択するように切り替えると、問題は次のようになります。

ITEM 1.1 をクリックしてから、ITEM 1 をクリックします。ITEM 1 をクリックしてから青い背景が表示されるまでに、かなりの遅延があります。

イメージ タグを削除すると、問題は解決します。

アイテムをビューの外にスクロールしてから再度戻すと、レンダリングが修正されます。残念ながら、Invalidate または Update を呼び出しても問題は解決しません。

以前に選択した要素の表示スタイルをなしに切り替えてから再度戻すと、問題が修正されます-ユーザーがノードテキストを誤って選択しない限り(ダブルクリックなど)

私が試したいくつかのこと：

  1. クラスを変更するだけでなく、outerhtml を完全に置き換えてみましたが、違いはありません。
  2. 画像タグを削除して背景画像を含めても違いはありません。

コード

*自分のマシンでこれをテストする場合、Web ページは「expand_tree_20x8.png」ファイルを見つけることができません。画像が見つかるかどうかに関係なく動作が示されるため、これは問題ではありません。重要なことは、画像タグがファイルに含まれている必要があるということです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">

    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <style type="text/css">
            span, img {margin:0;padding:0}
            .child {margin-left: 10px;}
            .normal {background-color: White;}
            .selected {background-color: blue; color: white;}
        </style>

        <script type="text/javascript">

            var selectedElement;

            function selectElement(e) {

                /* Select new element */
                e.attributes["class"].value = "selected";

                /* Unselect currently selected */
                if (selectedElement) {
                    selectedElement.attributes["class"].value = "normal";
                }

                selectedElement = e;
            }


        </script>

    </head>

    <body>

        <div>

            <div class="child"><label id="root_id" class="normal" onclick="selectElement(this)">ROOT</label></div>

            <div class="child"><img alt="img" src="temp/expand_tree_20x8.png" />

                <label id="item1_id" class="normal" onclick="selectElement(this)">ITEM 1</label>

                <div class="child"><img alt="img" src="temp/expand_tree_20x8.png" />
                    <label id="item1_1_id" class="normal" onclick="selectElement(this)">ITEM 1.1</label>
                </div>

            </div>

        </div>

    </body>

</html>
4

1 に答える 1

0

これはおそらくあなたが直面している再描画の問題を解決するものではありませんが、コメントに含めるには長すぎました.

変数eは通常、dom オブジェクトではなく、イベント オブジェクトを表します。そのため、他の開発者があなたのコードを見ると、それは混乱を招きます。elem、ele、domObj、または e 以外に変更します。

第二に、クラス名の設定方法が奇妙です。className が表示されることを期待しています。

var selectedElement;

function selectElement(elem) {

    /* Select new element */
    elem.className = "selected";

    /* Unselect currently selected */
    if (selectedElement) {
        selectedElement.className = "normal";
    }

    selectedElement = elem;
}

いくつかのヘルパー関数を使用してクラスを追加および削除し、要素に複数のクラスを持たせることをお勧めします。

function hasClass(elem, cls) {
    return elem.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(elem, cls) {
    if (!this.hasClass(elem, cls)) elem.className += " " + cls;
}
function removeClass(elem, cls) {
    if (hasClass(elem, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        elem.className = elem.className.replace(reg, ' ');
    }
}


var selectedElement;
function selectElement(elem) {

    /* Select new element */
    addClass(elem, "selected");

    /* Unselect currently selected */
    if (selectedElement) {
        removeClass(selectedElement, "normal";
    }

    selectedElement = elem;
}

高さを読み取ると再描画が強制される場合があるため、次のようなことを試してください

var selectedElement;
function selectElement(elem) {

    /* Select new element */
    addClass(elem, "selected");

    /* Unselect currently selected */
    if (selectedElement) {
        removeClass(selectedElement, "normal";
    }

    /* Try to force a redraw */
    //elem.style.display = "none";  //if just reading offsetHeight, does not work try uncommenting the two lines of code.
    var redrawFix = elem.offsetHeight;
    //elem.style.display = "block";  //or inline or whatever

    selectedElement = elem;
}
于 2012-03-07T12:42:53.823 に答える