jQuery检测鼠标停留在元素上的秒数

有没有办法检测鼠标指针停留在html元素上的秒数？

我想检索鼠标停留在元素上的秒数，以便在回调事件上稍微延迟…如果可能的话:)

我正在尝试通过计数器进行简单的for（）循环检测：

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

鉴于此标记：

 
Hover over me
 
 

像这个插件这样的东西可以做到这一点：

 (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 3

此代码将计算您使用鼠标hover在元素上的时间（以毫秒为单位）：

 $(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 4

我用C. Spencer Beggs的答案作为模板，因为他的那个不适合我。 我使用了简单的变量，包括许多console.log消息，并将’==’代码更正为’=’。 此示例将在执行前等待3秒“hover在链接上”操作。 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")} } })