jquery mouseenter / mouseleave ошибка, когда целевой div имеет дочерние поля ввода

Question

У меня есть два сортируемых списка, один из которых является вложенным, с эффектом ввода мыши для элементов li вложенного сортируемого списка. Моя проблема в том, что функции mouseenter и mouseleave вызываются непоследовательно, когда пользователь быстро перемещает мышь по списку над дочерними элементами, которые являются полями ввода.

Вот пример того, что происходит: вам нужно перетащить панель в список, а затем перетащить 3-4 элемента текстового поля в панель, чтобы увидеть проблему. Вы можете видеть, что 2 числа в верхнем правом углу отслеживают вход / выход мыши. Примечание. До сих пор я тестировал только мой сайт в Firefox 3.5.7. Кажется, проблема исправлена ​​в Firefox версии 3.6, но мне нужно, чтобы это работало на всех предыдущих версиях Firefox 3.x

пример

Мой код jquery 1.4.1:

Вот функции mouseenter и mouseleave:

$(".pane > li").live("mouseover", function(){
$("#in").html(in1);
$(this).children(".test").stop().animate({opacity: 1},400);
in1++;
});

$(".pane > li").live("mouseout", function(){
$("#out").html(out1);
$(this).children(".test").stop().animate({opacity: 0},400);
out1++;
});

Я попытался назначить функции mouseenter и mouseleave без использования live (), когда я вызываю функцию, которая динамически добавляет элементы li на страницу. Однако проблема все еще сохраняется, и вы можете увидеть ошибки, возникающие в отладчике firebug. Возможно, это как-то связано с relatedTarget в Firefox. Спасибо за любую помощь.

Answer 1

Я нашел не элегантное решение проблемы, просто разместив прозрачный div над полями ввода и уменьшив z-индекс div при нажатии на них. В то же время я фокусируюсь на поле ввода, поэтому div практически невидим для пользователя. Я все еще предпочел бы более элегантное исправление, если у кого-то есть какие-либо предложения.

Answer 2

Ничего себе, это выглядит довольно круто. В любом случае, возможно, вы можете сделать так, чтобы, когда «mouseenter» запускал одну вещь, он запускал код, который соответствует «mouseout» для всех остальных. Поскольку они не могут перекрываться, похоже, что это сработает.