Question

我在div上使用hover（）来显示用户移动鼠标时的信息面板，这种方法可以在90％的时间内正常工作，但有时事件似乎无法正确触发。这似乎与您将鼠标移入或移出div的速度有关。

我已经设置了一个jsfiddle显示我的html，js和css - http://jsfiddle.net/Y9Hx6/43/

是否有更好（更可靠）的方法来实现这一目标？

Answer 1

这是因为您使用的是e.target，而不是this。当您快速移动鼠标时，e.target几乎可以是任何东西，而在您的情况下，this始终可靠地引用该磁贴。

这是我的修复：

http://jsfiddle.net/Y9Hx6/46/

请注意，出于优化原因，我使用事件委派，没有理由让每个磁贴都有自己的处理程序。我还将其更改为使用mouseenter mouseleave，因此当您将鼠标悬停在滑动的信息上时，事件不会触发。

代码：

function slideUp(e) {
    var info = $(this).find(".info");
    info.stop().animate({
        top: 200 - info.outerHeight()
    }, 250);
}

function slideDown(e) {
    $(this).find(".info").stop().animate({
        top: 200
    }, 250);
}

$( ".wrap" ).delegate( ".tile", "mouseenter mouseleave", function(e){
    if( e.type == "mouseenter" ) {
     slideUp.call( this, e );   
    }
    else {
     slideDown.call( this, e );   
    }
});

提高onmouseenter / leave事件的可靠性

1 个答案: