Question

当鼠标下方的DOM发生变化时，Onmouseout似乎无法正常工作。我发现这是firefox（很老）Firefox Bug中innerHTML实现的已知错误。但是有解决方法（避免使用innerHTML）。我在这里创建了演示jsFiddle

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

代码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样式更改（类似于本机选择字段）。

执行dom操作chrome firefox时onmouseout没有被解雇

0 个答案: