Question

我在jQuery中使用“mouseover”函数时遇到了问题。

当我用我的元素上的鼠标太快时，我失去了“mouseleave”功能，我的元素不会删除自己......

我的JSFiddle：http://jsfiddle.net/tonymx227/4YRuf/5/

我的代码：

$('figure').children('img').on('mouseover', function(e){
    $(this).parent().append('<div id="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');
    $(this).parent().children('#figure-over').stop().slideDown();
    $(this).parent().children('#figure-over').on('mouseleave', function(){
        $(this).stop().slideUp( function(){
            $(this).remove();
        });
    }).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});

Answer 1

尝试这样的事情（我转而使用mouseout）：

http://jsfiddle.net/4YRuf/14/

$('figure').children('img').on('mouseover', function (e) {
    if (!$(this).parent().find('#figure-over').length){
        $(this).parent().append('<div id="figure-over"><a href="' + $(this).parent().data('url') + '" target="_blank">Voir</a></div>');
        $(this).parent().children('#figure-over').slideDown();
    }
});
$(document).on('mouseout', '#figure-over', function () {
    $(this).stop().slideUp(function () {
        $(this).remove();
    });
}).on('click', '#figure-over', function () {
    window.open($(this).children('a').attr('href'));
});

基本上假设您的mouseenter事件将重复出现并在再次添加子对象之前进行检查。您还需要连接到enter事件之外的leave事件，以避免意外链接多个事件 - 尽管包含检查也可以避免这种情况。 e.g。

$('figure').children('img').on('mouseover', function (e) {
    if (!$(this).parent().find('#figure-over').length){
        $(this).parent().append('<div id="figure-over"><a href="' + $(this).parent().data('url') + '" target="_blank">Voir</a></div>');
        $(this).parent().children('#figure-over').stop().slideDown();
        $(this).parent().children('#figure-over').on('mouseoutfunction () {
            $(this).stop().slideUp(function () {
                $(this).remove();
            });
        }).on('click', function () {
            window.open($(this).children('a').attr('href'));
        });
    }
});

Answer 2

尝试这样的事情：http://jsfiddle.net/4YRuf/13/

有了这个：您可以快速移动鼠标，结果会更好。而使用class而不是id ...

$('figure').children('img').on('mouseover', function(e){
    $('.figure-over').remove();
    $(this).parent().append('<div class="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');
    $(this).parent().children('.figure-over').stop().slideDown();
    $(this).on('mouseleave', removeIt)
    $(this).parent().children('.figure-over').on('mouseleave', removeIt).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});


function removeIt()
{    
    if( ! $('.figure-over').is(':hover') )
    {

        $('.figure-over').stop().slideUp( function(){

                $(this).remove();
            });
    }
}

更新：

可以更好地使用：http://jsfiddle.net/4YRuf/17/

$('figure').children('img').on('mouseover', function(e){

    if ( $('.figure-over').length == 0)
    {
         $(this).parent().append('<div class="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');   
    }

    $(this).parent().children('.figure-over').stop().slideDown();
    $(this).on('mouseleave', removeIt)
    $(this).parent().children('.figure-over').on('mouseleave', removeIt).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});


function removeIt()
{    
    if( ! $('.figure-over').is(':hover') )
    {

        $('.figure-over').stop().slideUp( function(){

                $(this).remove();
            });
    }
}

使用jQuery进行鼠标悬停，鼠标速度过快

2 个答案:

http://jsfiddle.net/4YRuf/14/