Désactiver Hover sur Cliquez sur

Question

J'ai une div avec une liste non ordonnée à l'intérieur qui glisse à gauche lorsque vous cliquez sur un élément LI.

<div id="products"> 
<ul> 
<li><a href="">Product 1</a></li> 
<li><a href="">Product 2</a></li> 
<li><a href="">Product 3</a></li> 
</ul> 

Le problème est lorsque vous cliquez sur un élément de la liste, les diapositives div gauche et qu'il glisse sous le curseur mosue, il déclenche les animations de roulement sur l'ensemble des éléments de la liste comme ils roulent par.

Y at-il un moyen de désactiver javascript sur les éléments surclic?

J'ai essayé ceci:

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

Mais cela ne semble pas fonctionner comme les animations continuent sur les autres éléments de la liste sur vol stationnaire?

Answer 1

Vous pouvez délie l'événement de vol plané à partir des éléments de la liste lors de votre événement click:

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

Ce morceau de code suppose que le vous liez l'événement mouseenter (par opposition à l'événement mouseover).

Vous pouvez ensuite appliquer à nouveau le gestionnaire d'événements de vol stationnaire aux éléments de la liste après l'animation complète si vous voulez avec une fonction de rappel dans votre appel d'animation:

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

Answer 2

Vous pouvez définir une variable dans la portée globale à true dans l'onclick et dans l'onmouseover envelopper le tout dans un if (!varSetOnClick) {? Pas la solution la plus gracieuse, mais il travaillerait ...