onmouseout не запускается при выполнении манипуляций с домом chrome firefox
Onmouseout, кажется, не работает должным образом, когда DOM под мышью изменяется. Я обнаружил, что это известная ошибка реализации innerHTML в Firefox (довольно старая) ошибка Firefox. Однако есть обходной путь (избегая 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 (аналогично полю естественного выбора).