Question

在页面上我有一个日历，在AJAX调用发送到服务器的日子移动光标以检索当天的事件。然后将事件列在日历旁边的div中。这可以正常工作。

问题是：如果光标位于日历的一侧，但它位于日历的一侧，但它是内置的，则无法将光标移离日历而不会触发另一个显示事件的调用再过一天。
这是因为当鼠标在其他日子移动时，会立即触发“鼠标悬停”事件我需要的是只有当光标在当天保持很短的时间（比如500毫秒）时触发jQuery功能，不仅仅是它只是传递它。
那么，是否有可能对jQuery说：“如果mouseove持续至少500ms，则触发函数，如果没有，什么都不做”？

目前我的jQuery功能是

$('div#eventi-home').on('mouseover', 'li.calday', function() {  
    var $li = $(this),  
    form_data = {  
        day: $li.data('giorno'),  
        month: $li.data('mese'),  
        year: $li.data('anno')  
    };  

    $.ajax({  
        url: "<?php echo base_url('home/events_of_the_day/') ?>",  
        type: 'POST',  
        data: form_data,  
        success: function(msg) {  
            $('div#events-of-the-day').html(msg);  
        }  
    });  
});

有一天有这段代码

<li class="calday" data-giorno="14" data-mese="11" data-anno="2013" >14</li>

我如何更改功能？

Answer 1

hoverIntent插件非常适用于此：

http://cherne.net/brian/resources/jquery.hoverIntent.html

$('div#eventi-home li.calday').hoverIntent(function() {  
    var $li = $(this),  
    form_data = {  
        day: $li.data('giorno'),  
        month: $li.data('mese'),  
        year: $li.data('anno')  
    };  

    $.ajax({  
        url: "<?php echo base_url('home/events_of_the_day/') ?>",  
        type: 'POST',  
        data: form_data,  
        success: function(msg) {  
            $('div#events-of-the-day').html(msg);  
        }  
    });  
}, null);

Answer 2

您可以使用超时：

$('div#eventi-home').on('mouseover mouseout', 'li.calday', function (e) {
    clearTimeout(window.timeout);
    if (e.type === "mouseout") return;
    window.timeout = setTimeout(function () {
        //CODE HERE...
    }, 500);
});

jQuery - 仅在事件足够长时触发鼠标悬停

2 个答案: