停止鼠标中心在同一元素中的单击传播

Question

好吧，也许这是个愚蠢的问题，但我是个新手，一般都有jquery和javascript，所以我找不到解决方案(也许我走错了路)。

我有一个菜单，它可以在短时间内对"mouseeenter“和"mouseleave”进行一些.animate动画，但是它也具有“单击”功能：-当鼠标继续运行时，一个元素将其"top“样式位置移动到另一个--当鼠标离开时，相同的元素移动到它原来的"top”样式位置。-当鼠标单击它时，会发生一些事情(html5部分滑过css3转换)，如果我停留在元素上，然后在“鼠标中心”动画结束后单击它，那么没有问题，但是如果我在.animate函数结束之前快速单击，当单击事件传递结束时，.animate仍然会影响我的元素并将其移动到错误的位置。

因此，问题是:如何通过在同一个元素中使用click函数来阻止mousenter传播？我试过使用.unbind，它适用于mouseleave，但不适用于mousenter。

下面是为这个问题创建的示例代码：

$('#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
});

非常感谢

Answer 1

试一下鼠标点击：

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