是否有办法检测鼠标指针停留在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 }
给定这个标记:
<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
});
这段代码将计算鼠标悬停在元素上的时间(以毫秒为单位):
$(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);
}
})
});
您应该能够利用hover()
函数来捕获鼠标在特定元素上移动的时间,然后在鼠标从该对象上移开时根据需要做出反应。
$("#someDiv").hover(function(){
//start counter
}, function(){
//stop counter
});
我使用了C. Spencer Beggs的答案作为模板,因为他的答案不适合我。我使用了简单的变量,包含了许多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")}
}
})