Javascript 在firefox上执行dom操作时未激发onmouseout_Javascript_Google Chrome_Dom Manipulation_Onmouseout

Javascript 在firefox上执行dom操作时未激发onmouseout

javascript google-chrome

Javascript 在firefox上执行dom操作时未激发onmouseout,javascript,google-chrome,dom-manipulation,onmouseout,Javascript,Google Chrome,Dom Manipulation,Onmouseout,当鼠标下方的DOM被更改时，Onmouseout似乎无法正常工作。我发现这是firefox中innerHTML实现的已知错误（相当旧）。但是，有一种解决方法（避免使用innerHTML）。我在这里创建了演示代码js: test = document.getElementById('test'); test.onmouseover = function() { this.style.backgroundColor='blue'; } test.onmouseout = funct

当鼠标下方的DOM被更改时，Onmouseout似乎无法正常工作。我发现这是firefox中innerHTML实现的已知错误（相当旧）。但是，有一种解决方法（避免使用innerHTML）。我在这里创建了演示

代码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);
}

test=document.getElementById（'test'）；
test.onmouseover=函数（）{
这个.style.backgroundColor='blue'；
}
test.onmouseout=函数（）{
这个.style.backgroundColor='red'；
}
window.onkeyup=函数（）{
var test=document.getElementById（'test'）；
var test2=document.getElementById（'test2'）；
var f；
var sp1=document.createElement（“div”）；
var sp1_content=document.createTextNode（“测试”）；
追加子项（sp1_内容）；
//sp1.innerHTML='Test
Test'；
sp1.id='test2'
insertedElement=test.insertBefore（sp1，test2）；
test2.style.height='0px'；
//replacedNode=test.replaceChild（sp1，test2）；
//test.innerHTML='test'；
//警报（1）；
f=函数（）{
test.removeChild（test2）；
}
设置超时（f，1000）；
}

代码HTML:

<body>
  <div id='test' style='background-color:red;'>
    <div id='test2'>  
      Test<br />Test<br />Test<br />Test<br />
    </div>
  </div>
</body>


测试
测试
测试
测试

当您将鼠标悬停在元素上时，它会更改颜色。当您在上面并按下某个按钮时，元素被更改，鼠标不再在上面（应该触发onmouseout事件）。这种变通方法在firefox中有效，但在chrome中不起作用。有没有什么方法可以正确地检测onmouseout？我读过一些关于突变事件的文章，但是我认为它们是最后的选择，因为它们对性能有影响。由于我还没有使用任何框架，我不想使用它来解决这个荒谬的问题。这个用例是具有可变高度的自定义下拉菜单，带有搜索功能，其中有一些onmouseover/onmouseout样式更改（类似于原生选择字段）

非常适合我（Chrome 28.0.1500.71/Ubuntu），当你在上面按下按钮时，div会保持蓝色。应为红色（因为onmouseout事件将颜色更改为红色）。我有28.0.1500.72 m/Win XP，也在Win 7上进行了测试：/