onmouseout seems not working when dom underneath mouse changed. have found out known bug of innerhtml implementation in firefox (quite old) firefox bug. there workaround (avoiding innerhtml). have created demonstration here jsfiddle
code js:
test = document.getelementbyid('test'); test.onmouseover = function() { this.style.backgroundcolor='blue'; } test.onmouseout = function() { this.style.backgroundcolor='red'; } window.onkeyup = function() { var test = document.getelementbyid('test'); var test2 = document.getelementbyid('test2'); var f; var sp1 = document.createelement("div"); var sp1_content = document.createtextnode("test"); sp1.appendchild(sp1_content); //sp1.innerhtml = 'test<br />test'; sp1.id = 'test2' insertedelement = test.insertbefore(sp1, test2 ); test2.style.height='0px'; //replacednode = test.replacechild(sp1, test2); //test.innerhtml = 'test'; //alert(1); f = function() { test.removechild(test2); } settimeout(f,1000); } code html:
<body> <div id='test' style='background-color:red;'> <div id='test2'> test<br />test<br />test<br />test<br /> </div> </div> </body> when hover on element changes color. when on , press button, element changed , mouse not on more (onmouseout event should triggered). workaround works in firefox, not in chrome. there way how detect onmouseout? have read mutation events, consider these last resort have performance impact. not using framework yet, not use resolve ridiculous issue. use-case custom drop-down menu variable height search functionality has onmouseover/onmouseout styling changes (similar native select field).
Comments
Post a Comment