css - Possible bug when changing element class name with javascript in IE8, IE9 and IE10 -
note: had previous similar question i've attempted delete. thought problem .net webbrowser control it's ie.
the following code contents of .htm file displays 3 items can clicked. each item clicked javascript method changes background blue , changes selected item background white.
here's problem, occurs ie8, 9 , 10. works in ff, chrome , managed demonstrate works in ie5 , ie7 using ie10 developer preview.
click on item 1, click on item 1.1 - item 1.1 highlighted item 1 not de-highlighted.
however (moving document tree):
click on item 1, root - no problem
click on item 1,1 item 1 - no problem.
now, if switch javascript selectelement(e) method first deselect select, problem becomes:
click on item 1.1 click on item 1 - there noticeable delay between item 1 being clicked , blue background being displayed.
if image tags removed, problem goes away.
scrolling item out of view , in again fixes rendering. unfortunately, calling invalidate or update not fix problem.
switching display style of selected element none , again fixes problem - unless user selects node text mistake (eg double-click)
some things i've tried:
- instead of changing class, i've tried replacing outerhtml makes no difference.
- removing image tag , including background image makes no difference.
code
*when testing on own machine, web page not able find 'expand_tree_20x8.png' file; doesn't matter behaviour exhibited whether images can found or not. important thing image tags must in file.
<!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 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>
this not fix redraw issue facing, way long include in comment.
the variable e stands event object, not dom object. cnfusing other developers when @ code. change elem, ele, domobj, or else e.
second, way setting class name strange. expect see classname.
var selectedelement; function selectelement(elem) { /* select new element */ elem.classname = "selected"; /* unselect selected */ if (selectedelement) { selectedelement.classname = "normal"; } selectedelement = elem; } it better use helper functions add , remove class can have more 1 class on elements.
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 selected */ if (selectedelement) { removeclass(selectedelement, "normal"; } selectedelement = elem; } sometimes reading height forces redraw, try doing this
var selectedelement; function selectelement(elem) { /* select new element */ addclass(elem, "selected"); /* unselect selected */ if (selectedelement) { removeclass(selectedelement, "normal"; } /* try force redraw */ //elem.style.display = "none"; //if reading offsetheight, not work try uncommenting 2 lines of code. var redrawfix = elem.offsetheight; //elem.style.display = "block"; //or inline or whatever selectedelement = elem; }
Comments
Post a Comment