如何檢查你懸停元素的時間長度

Question

是否有可能使用jQuery'time'光標懸停在某個元素上的時間？如果有人能讓我朝正確的方向發展，那將會很好。

泰斯

Answer 1

我這樣做是使用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 2

我用「懸停意向」之前延遲jQuery函數：http://cherne.net/brian/resources/jquery.hoverIntent.html - 如果這是你的意思。

Answer 3

您可以使用懸停功能來做到這一點。事情是這樣的：

$(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."); 
     } 
    ); 
});