注意:我之前有一个类似的问题,现在我试图删除它。我原以为问题出在.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并不能解决问题
将先前选择的元素的显示样式切换为"无",然后再切换回"无"可修复问题-除非用户错误地选择了节点文本(例如双击)
我尝试过的一些东西:
- 我尝试完全替换outerhtml,而不是仅仅更改类,但这没有什么区别
- 移除图像标签和包括背景图像没有区别
代码
*在您自己的机器上测试时,网页将无法找到"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;
}