Question

有没有办法捕获鼠标悬停并保持（暂停）事件，但是如果鼠标正在通过元素则没有。因此，只有当您悬停并停留时才会触发该事件。

Answer 1

您可以在执行所需的任何代码之前使用setTimeout创建延迟，并在鼠标离开元素时使用clearTimeout取消计时器：

var timer;
$("#example").mouseover(function() {
    timer = setTimeout(function() {
       console.log("time passed");
    }, 1000); 
}).mouseout(function() {
    clearTimeout(timer);  
});

以上是working example以上内容。

Answer 2

是的，它存在一个插件。我在几乎所有的悬停代码中都使用它：

jQuery HoverIntent

Answer 3

有专为此设计的hoverIntent插件。

Answer 4

查看使用javascript计时器，鼠标悬停时开始计数。当鼠标离开时，停止计时器。计时器可以触发事件，如果鼠标关闭/离开从不发生，计时器将启动你的悬停/停留功能。

也可能是JQuery插件。

Answer 5

在mouseenter上，计时器将在500ms后启动，你的函数将被调用如果用户在延迟之前离开，计时器将被清除，因此不会调用该功能。

yourElement.live({
    mouseenter: function() {
        t=setTimeout(function(){ yourFunction() }, 500); 
    }, mouseleave: function() {
        clearTimeout(t);
    }
});

希望这有帮助：）

捕获事件悬停并留下与路过

5 个答案: