如何使鼠标悬停直到页面刷新？答案

【问题标题】：How do I make a mouseover stick until a page refresh?如何使鼠标悬停直到页面刷新？
【发布时间】：2012-02-28 20:46:25
【问题描述】：

我希望在延迟后处理 mouseover 事件，然后在页面刷新之前处于非活动状态。

这是我目前的代码：

$(function() {
    $("#page-flip").mouseover(function() { 
        $(".box").toggleClass("box-change");
        $(".films").toggleClass("films-change");
        $(".synopsis").toggleClass("synopsis-change");
    });
});

如何为此添加时间延迟，而不是在完全触发一次后使其处于非活动状态？谢谢:)

【问题讨论】：

你知道unbind吗？ api.jquery.com/unbind

标签： javascript jquery css mouseevent mouseover

【解决方案1】：

您可以使用.one() 让事件处理程序只触发一次：

$(function() {
    //bind a mouseover event handler that will fire only once
    $("#page-flip").one('mouseover', function() { 

        //set a timeout so the code runs after half a second
        setTimeout(function () {

            //run your code here
            $(".box").toggleClass("box-change");
            $(".films").toggleClass("films-change");
            $(".synopsis").toggleClass("synopsis-change");
        }, 500);
    });
});

这是一个演示：http://jsfiddle.net/jasper/fWakf/3/

文档：http://api.jquery.com/one

你也可以使用.off():

$(function() {
    $("#page-flip").on('mouseover', function() { 

        //remove this event handler so it doesn't fire in the future
        $(this).off('mouseover');
        setTimeout(function () {
            $(".box").toggleClass("box-change");
            $(".films").toggleClass("films-change");
            $(".synopsis").toggleClass("synopsis-change");
        }, 500);
    });
});

这是一个演示：http://jsfiddle.net/jasper/fWakf/4/

注意.on() 是 jQuery 1.7 中的新内容，在本例中是相同的 .bind()。 .off() 也是新的，所以如果您使用的是 1.7 之前的版本和 .bind()，请使用 .unbind()。

【讨论】：

太棒了，非常感谢。 :) 现在我需要的只是延迟。
@user1179593 我的代码中的setTimeout 会造成延迟。您可以将500 更改为您希望代码等待的任何其他毫秒数。

【解决方案2】：

编辑这个答案比Jasper's更糟糕。但它使用的模式不需要 jQuery，所以我将其搁置。

好吧，您可以简单地使用全局变量，也可以复杂地完全删除事件。

简单的看起来像这样。

 var __GlobalEventFired = false;
 $(function() { 
 $("#page-flip").mouseover(function() {  
    if(!__GlobalEventFired)
    {
       __GlobalEventFired = true;
       $(".box").toggleClass("box-change"); 
       $(".films").toggleClass("films-change"); 
       $(".synopsis").toggleClass("synopsis-change"); 
    }
}); 
});

【讨论】：