在IE8、IE9和IE10中使用javascript更改元素类名时可能出现错误

Possible bug when changing element class name with javascript in IE8, IE9 and IE10

本文关键字：元素 错误 IE9 IE8 IE10 javascript      更新时间：2023-09-26

注意：我之前有一个类似的问题，现在我试图删除它。我原以为问题出在.NET网络浏览器控件上，但问题出在IE上

以下代码是一个.htm文件的内容，该文件只显示3个可以单击的项目。单击每个项目时，javascript方法会将其背景更改为蓝色，并将之前选择的项目背景更改回白色。

这是一个问题，它只出现在IE8、9和10中。它在FF、chrome中工作，我使用IE10开发者预览演示了它在IE5和IE7中的工作。

单击项目1，然后单击项目1.1-项目1.1高亮显示，但项目1未取消高亮显示。

但是（向上移动文档树）：
单击项目1，然后单击根-没有问题
单击项目1，1，然后单击项目1-没有问题。

现在，如果我将javascript selectElement（e）方法切换为先取消选择，然后选择，问题就变成了：

点击项目1.1，然后点击项目1——点击项目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>

这可能无法解决您面临的重绘问题，但这太长了，无法包含在注释中。

变量e通常代表事件对象，而不是dom对象。因此，当其他开发人员查看您的代码时，这就是cnfusing。将其更改为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;
}
相关文章：