0

注意：我以前有一个类似的问题，现在我试图删除它。我认为问题与 .NET webbrowser 控件有关，但与 IE 有关。

以下代码是一个 .htm 文件的内容，该文件仅显示 3 个可以单击的项目。单击每个项目时，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. 删除图像标签并包含背景图像没有区别。

代码

*在您自己的机器上测试时，网页将无法找到“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 之外的任何其他内容。

其次，您设置类名的方式很奇怪。我希望看到类名。

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 回答