Question

是否可以使用jQuery'计时'光标悬停在某个元素上多长时间？如果有人能让我朝着正确的方向前进，那就太好了。

泰斯

Answer 1

您可以使用悬停功能来执行此操作。像这样：

$(document).ready(function() {
    $('#myElement').hover(
        function() {
            $(this).data("hoverStart", (new Date()).getTime());
        }, 
        function() {
            var hoverTime = ((new Date()).getTime() - $(this).data("hoverStart")) / 1000;

            alert("You hovered for " + hoverTime +  " seconds.");
        }
    );
});

Answer 2

我是使用jQuery .hover()完成的 - 您基本上可以将开始时间存储在元素的.data中，并在鼠标离开时将其与Date().getTime()进行比较。

在这里敲了一个工作小提琴：http://jsfiddle.net/XQ9kY/1/

HTML：

<div id="hoverZone" class="hoverable">
    You can hover over me<br />for as long as you like
</div>
<div id="hoverResult">
</div>

jQuery：

$('.hoverable').hover(   
    function(){       
        $(this).data('inTime', new Date().getTime());
    },    
    function(){       
        var outTime = new Date().getTime();       
        var hoverTime = (outTime - $(this).data('inTime'))/1000;        
        $('#hoverResult').html('you were hovering for ' + hoverTime + 's');
    }
);

Answer 3

我之前使用'Hover Intent'来延迟JQuery函数：http://cherne.net/brian/resources/jquery.hoverIntent.html - 如果这就是你的意思。

如何检查悬停元素的时间

3 个答案: