如何仅在鼠标悬停侦听器未激活时执行函数

Question

为了避免由于页面上的滚动效果而在屏幕上产生闪烁效果，我想仅在不同缩略图上的mouseOver状态当前没有发生时才激活缩略图的mouseOut函数。我该怎么做呢?

Answer 1

您可以检查您的缩略图元素是否有一个active类，当成功的mouseout事件触发时添加。如果任何其他缩略图元素有这个类，那么什么都不做，如果没有找到，那么运行你的mouseout代码:

$('.thumb-element').on('mouseout', function () {
    if ($('.thumb-element').filter('.active-mouseout').length == 0) {
        //there are no elements with both the `thumb-element` class and the `active-mouseout` class so you can do work here
        $(this).addClass('active-mouseout').animate({top : 'XXpx'}, 250, function () {
            //now we remove the `active-mouseout` class so another `mouseout` event can run
            $(this).removeClass('active-mouseout');
        });
    }
});

你可以在必要的时候删除active-mouseout类，例如，如果它需要一个动画，那么你可以在那个动画的回调中删除这个类。

下面是上述解决方案的一个示例:http://jsfiddle.net/jasper/zg5g7/