jQuery的檢測鼠標多少秒停留在元素

Question

有沒有什麼辦法來檢測鼠標指針多少秒保持一個HTML元素？

我想找回鼠標多少秒停留在元素放少許延遲一個回調事件......如果可能:)

我與一個簡單的（）循環檢測嘗試通過計數器：

var time_over ; 
$('.bean-active').live('mouseover',function(){ 
    id_tag = $(this).attr("id"); 
    for(time_over = 1;time_over <= 3000;time_over ++){ 
     if(time_over == 3000){ 
     $('.bean-bubble,.bean-bubble img').hide(); 
     $('#bean-bubble-'+id_tag+',#bean-bubble-'+id_tag+' img').show(); 
     } 
    } 
}); 

的問題是，它不工作:(

也是我想結合mouseLeave事件，腳本邏輯應該是：

while (mouseover element count how many time it stays over) 
    if (time == n) 
    { do somenthing } 
if (mouseleave from element earlier then time) 
{ do somenthing different } 

Answer 1

您應該能夠利用hover()功能來捕獲當鼠標越過一個特定的元素，然後當鼠標從該對象移除期望反應。

$("#someDiv").hover(function(){ 
    //start counter 
}, function(){ 
    //stop counter 
}); 

Answer 2

該代碼將計算以毫秒爲單位，你將鼠標懸停在一個元素用鼠標時間：

$(document).ready(function() { 
$('#element').bind('mouseenter mouseleave', function(evt) { 
    var currentTime == new Date(); 
    if (evt.type === 'mouseenter') { 
     $(this).data('mouseenterTime') == currentTime.getTime(); 
    } else if (evt.type === 'mouseleave') { 
     var mouseoverTime = currentTime.getTime() - $(this).data('mouseenterTime'); 
     alert('mouseover time was: ' + mouseoverTime); 
    } 
}) 
}); 

Answer 3

鑑於此標記：

<div id="hoverOverMe">Hover over me</div> 
<div id="output"></div> 

事情是這樣的插件應該做的絕招：

(function($) { 
    $.fn.delayedAction = function(options) 
    { 
     var settings = $.extend(
      {}, 
      { 
       delayedAction : function(){}, 
       cancelledAction: function(){}, 
       hoverTime: 1000    
      }, 
      options); 

     return this.each(function(){ 
      var $this = $(this); 
      $this.hover(function(){ 
       $this.data('timerId', 
          setTimeout(function(){ 
             $this.data('hover',false); 
             settings.delayedAction($this); 
             },settings.hoverTime)); 
       $this.data('hover',true); 
      }, 
      function(){   
       if($this.data('hover')){  
        clearTimeout($this.data('timerId')); 
        settings.cancelledAction($this); 
       } 
       $this.data('hover',false); 
      }); 
     }); 
    } 
})(jQuery); 

和調用代碼：

$('#hoverOverMe').delayedAction (
    { 
     delayedAction: function($element){ 
      $('#output').html($element.attr('id') + ' was hovered for 3 seconds'); 
     }, 
     cancelledAction: function($element){ 
      $('#output').html($element.attr('id') + ' was hovered for less than 3 seconds'); 
     }, 
     hoverTime: 3000 // 3 seconds 
    } 
); 

活生生的例子：http://jsfiddle.net/nrUqS/

爲了您的需求，這樣的事情應該足夠了：

$('.bean-active').delayedAction(
{ 
    delayedAction: function($element){ 
     id_tag = $element.attr("id"); 
     $('.bean-bubble,.bean-bubble img').hide(); 
     $('#bean-bubble-'+id_tag+',#bean-bubble-'+id_tag+' img').show(); 
    }, 
    hoverTime: 3000 
}); 

Answer 4

我用C.斯賓塞貝格斯答案爲模板，因爲他沒有爲我工作。我使用了簡單的變量，包含了很多console.log消息，並將'=='代碼修正爲'='。此示例將在演示之前等待3秒'懸停在鏈接上'動作。 HTH某人。

var mouseenterTime = 0; 

$(document).on('mouseenter mouseleave', '#element', function (evt) 
{ 
    var currentTime = new Date(); 
    if (evt.type === 'mouseenter') 
    { 
     mouseenterTime = currentTime.getTime(); 
     console.log('mouseenterTime (#1): ' + mouseenterTime); 
    } else if (evt.type === 'mouseleave') { 
     console.log('mouseenterTime (#2): ' + mouseenterTime); 
     var mouseoverTime = currentTime.getTime() - mouseenterTime; 
     console.log('mouseover time was: ' + mouseoverTime); 

     // Checking if the Hover action has latest for longer than 3 seconds. 
     if(mouseoverTime > 3000) {console.log("Three seconds have elapsed")} 
    } 
})