Erreur jquery mouseenter/mouseleave lorsque la div cible a des champs de saisie enfants

Question

J'ai deux listes triables, une étant imbriquée, avec un effet de souris sur les éléments li de la liste triable imbriquée. Mon problème est que les fonctions mouseenter et mouseleave sont appelées de manière incohérente lorsqu'un utilisateur déplace rapidement la souris dans la liste sur les éléments enfants qui sont des champs de saisie.

Voici un exemple de ce qui se passe, vous devez faire glisser un volet dans la liste, puis faire glisser 3-4 éléments de la zone de texte dans le volet pour pouvoir voir le problème. Vous pouvez voir les 2 chiffres dans le coin supérieur droit garder la trace de l'entrée/sortie de la souris. Note J'ai seulement testé mon site dans Firefox 3.5.7 jusqu'ici. Le problème semble être corrigé dans la version Firefox 3.6 mais j'ai besoin que cela fonctionne sur toutes les versions précédentes de Firefox 3.x

example

Mon jquery 1.4.1 Code:

Voici le mouseenter et fonctions 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++; 
}); 

J'ai essayé d'assigner les fonctions mouseenter et MouseLeave sans utiliser en direct() quand je l'appelle la fonction qui ajoute les éléments li dynamiquement dans la page. Toutefois, le problème persiste et vous pouvez voir les erreurs surgissant dans le débogueur firebug. Peut-être que cela a quelque chose à voir avec relatedTarget dans Firefox. Merci pour toute aide.

Answer 1

Wow, ça a l'air plutôt cool. Quoi qu'il en soit, peut-être que vous pouvez faire en sorte que lorsque "mouseenter" se déclenche sur un truc, il exécute le code qui correspond à "mouseout" sur tous les autres. Comme ils ne peuvent pas se chevaucher, cela semble fonctionner.

Answer 2

J'ai trouvé une solution inélégante au problème en positionnant absolument un div transparent sur les champs d'entrée et en diminuant le z-index de div quand on clique dessus. En même temps, je me concentre sur le champ de saisie afin que la div soit pratiquement invisible pour l'utilisateur. Je préférerais toujours une solution plus élégante si quelqu'un a des suggestions.