1

更改鼠标下方的 DOM 时，Onmouseout 似乎无法正常工作。我发现这是 firefox (相当老的) Firefox Bug中的 innerHTML implementation 的已知错误。然而，有一种解决方法（避免使用 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 样式更改（类似于本机选择字段）。

4

0 回答 0