В библиотеке, которую я использую, у меня есть задача переместить элемент в переднюю часть dom, когда он зависнет. (Я делаю это больше, поэтому мне нужно это увидеть, а затем сжимать его, когда мышь).Переместить активный элемент теряет mouseout событие в internet explorer
В библиотеке, которую я использую, есть аккуратное решение, которое использует активный элемент appendChildren для перемещения его до конца его родителя так далее в конец dom и, в свою очередь, сверху.
Проблема в том, что я считаю, что поскольку элемент, который вы перемещаете, тот, который вы наводите на событие mouseout, теряется. Ваша мышь все еще находится над узлом, но событие mouseout не запускается.
Я отключил функциональность, чтобы подтвердить проблему. Он отлично работает в firefox, но не в любой версии IE. Я использую jquery здесь для скорости. Решения могут быть в простом старом javascript, который был бы предпочтительнее, поскольку, возможно, потребуется вернуться к потоку.
Я не могу использовать z-index здесь, поскольку элементы vml, библиотека Raphael, и я использую вызов toFront. Пример использования уль/li, чтобы показать проблему в простом примере
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
li
{
border:1px solid black;
}
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
$("li").mouseover(function(){
$(this).css("border-color","red");
this.parentNode.appendChild(this);
});
$("li").mouseout(function(){
$(this).css("border-color","black");
});
});
</script>
</body>
</html>
Edit: Вот ссылка на JS пасты бункером, чтобы увидеть его в действии. http://jsbin.com/obesa4
** Редактировать 2: ** Просмотреть все комментарии ко всем ответам перед публикацией, так как в них больше информации.
Я не могу понять ваше сообщение. вы хотите, чтобы событие mouseout не срабатывало, пока мышь все еще находится над элементом? каков ваш реальный вопрос? – lincolnk
И для этого.parentNode.appendChild (this) ;, вы пытаетесь повторно добавить существующий элемент LI? Почему бы просто не добавить к нему класс CSS вместо добавления/удаления одного и того же элемента с новым CSS? Или ваш исходный код включает в себя добавление совершенно нового элемента из другого места в UL, чтобы подражать вашему «расширенному» размеру эффекта, который вы упомянули в начале? – Gary
Linkol Я пытаюсь заставить образец кода работать, т. Е. Как в Firefox. Событие mouseout не срабатывает. В качестве примера я использую элементы li. Как я уже сказал в своем посте, элементы на самом деле являются элементами VML. Таким образом, такие вещи, как z-index или add classes, не будут работать, если только люди не могут оказаться разными. – johnwards