Stop mouseenter propagation on click in the same element

Question

Ok, maybe it's a stupid question, but I'm a newbie with jquery and javascript in general, so I can't find a solution (and maybe I'm in the wrong way).

I have a menu which makes some .animate animations on "mouseeenter" and "mouseleave" in a short time, but it gots "click" functions too: - When the mouse go on, an element move its "top" style position to another - When the mouse go out, the same element move to its original "top" style position. - When the mouse click on it, something happens (html5 section sliding with css3 transitions) No problem if I stay on the element and I click it after the "mouseenter" animation end, but if I click fast before the end of the .animate function, when the click event propogation finish, the .animate still affect my element and move it in the wrong place.

So the question is: how can I stop the mousenter propagation by a click function in the same element? I tried with .unbind and it works for mouseleave, but not for mousenter.

Here is an example code create for this question:

$('#control_a').bind({
    mouseenter: function(e) {
        $("#element").stop().animate({top: "-=100px"}, 200);
    },
    mouseleave: function(e) {
        $("#element").stop().animate({top: "50%"}, 200);
    }
});
$("#control_a").click(function(){                                               
    $("#control_a").unbind('mouseleave mouseenter');
        $("#element").css('top' , '50%');
    // something happens
});

Thank you very much

Answer 1

try this for your mouse click:

$("#control_a").click(function(){                                               
    $("#control_a").unbind('mouseleave mouseenter');
    $("#element").stop().css('top' , '50%');
    // something happens
});