Disable Hover on Click

I have a div with an unordered list inside that slides left when you click an LI item.

<div i开发者_开发技巧d="products">
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li>
</ul>

The problem is when you click a list item, the div slides left and as it slides under the mosue cursor, it triggers the rollover animations on all of the list items as they roll by.

Is there a way to disable javascript on items onclick?

I tried this:

$("#products li a").click(function(event){
event.preventDefault();
});
}

But that doesn't seem to work as the animations still continue on the other list items on hover?

You can unbind the hover event from the list items when in your click event:

$("#products li a").click(function(){
    $("#products").find('li').unbind('mouseenter');
});

This bit of code assumes that the you are binding to the mouseenter event (as opposed to the mouseover event).

You can then re-apply the hover event handler to the list items after the animation completes if you want with a callback function in your animation call:

$("#products").animate({left: '-=100px'}, function () {
    $("#products").find('li').bind('mouseenter', function () {
        //add hover code here
    });
});

You could set a variable in the global scope to true in the onclick and in the onmouseover wrap the whole thing in a if (!varSetOnClick) {? Not the most graceful solution but it would work...