[英]jQuery detect how many seconds a mouse stays over element
is there any way to detect how many seconds a mouse pointer stays on an html element? 有没有办法检测鼠标指针停留在html元素上的秒数?
I would like to retrieve how many seconds a mouse stays over element to put a little delay on a callback event... if is possible :) 我想检索鼠标停留在元素上的秒数,以便在回调事件上稍微延迟...如果可能的话:)
i'm trying with a simple for() cycle detecting by a counter : 我正在尝试通过计数器进行简单的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();
}
}
});
the problem is that it doesn't works :( 问题是它不起作用:(
also i would like to bind a mouseleave event, script logic should be: 另外我想绑定一个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 }
Given this markup: 鉴于此标记:
<div id="hoverOverMe">Hover over me</div>
<div id="output"></div>
Something like this plugin should do the trick: 像这个插件这样的东西可以做到这一点:
(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);
and the calling code: 和调用代码:
$('#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
}
);
Live example: http://jsfiddle.net/nrUqS/ 实例: http : //jsfiddle.net/nrUqS/
For your requirement, something like this should suffice: 根据您的要求,这样的东西就足够了:
$('.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
});
This code will calculate the time in milliseconds that you hover over an element with your mouse: 此代码将计算使用鼠标悬停在元素上的时间(以毫秒为单位):
$(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);
}
})
});
You should be able to utilize the hover()
function to capture when the mouse goes over a particular element and then react as desired when the mouse is removed from that object. 您应该能够利用
hover()
函数捕获鼠标何时越过特定元素,然后在从该对象移除鼠标时根据需要做出反应。
$("#someDiv").hover(function(){
//start counter
}, function(){
//stop counter
});
I've used C. Spencer Beggs answer as a template, because his one didn't work for me. 我用C. Spencer Beggs的答案作为模板,因为他的那个不适合我。 I've used simple variables, included lots of console.log messages and corrected '==' code to '='.
我使用了简单的变量,包括很多console.log消息,并将'=='代码更正为'='。 This example will wait 3 seconds of 'hover over a link' action to take place before acting.
此示例将在执行之前等待3秒“悬停在链接上”操作。 HTH someone.
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")}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.