views:

439

answers:

2

I have two sortable lists, one being nested, with a mouse enter effect on the li elements of the nested sortable list. My problem is that the mouseenter and mouseleave functions are being called inconsistently when a user moves the mouse quickly through the list over the child elements which are input fields.

Here is a sample of what is happening, you have to drag a pane into the list and then drag 3-4 textbox items into the pane to be able to see the problem. You can see the 2 numbers in the top right are keeping track of the in/out of the mouse. Note I have only tested my site in firefox 3.5.7 thus far. The problem appears to be fixed in Firefox version 3.6 but I need this to work on all previous versions of Firefox 3.x

example

My jquery 1.4.1 code:

Here are the mouseenter and mouseleave functions:

$(".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++;
});

I have attempted to assign the mouseenter and mouseleave functions without using live() when I call the function that adds the li elements dynamically into the page. However, the problem still persists and you can see errors cropping up in firebug debugger. Perhaps it has something to do with relatedTarget in Firefox. Thanks for any assistance.

A: 

Wow that looks pretty cool. Anyway, maybe you can make it so that when "mouseenter" fires on one thingy, it runs the code that corresponds to "mouseout" on all the other ones. Since they can't overlap, that seems like it'd work.

Pointy
Hmm it didn't really work out that well. It became convoluted because I would like to add another mouseenter() event to a child element for the already mouse overed element.
Ag565
A: 

I found an inelegant solution to the problem by absolutely positioning a transparent div over the input fields and having the div's z-index decrease when they are clicked. At the same time I focus on the input field so the div is virtually invisible to the user. I would still prefer a more elegant fix if anyone has any suggestions.

Ag565