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")} 
    } 
})