延迟 jquery 悬停事件？

我希望延迟 jquery 中的悬停事件。当用户将鼠标悬停在链接或标签上时，我正在读取文件。我不希望这个事件立即发生，以防用户只是在屏幕上移动鼠标。有什么办法可以延迟发射吗？

谢谢你。

示例代码:

$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});

更新: < em > (1/14/09) 在添加了 HoverInent 插件之后，上面的代码被更改为下面的代码来实现它。很容易实现。

$(function() {
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, // function = onMouseOver callback (REQUIRED)
out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
}
$('#container a').hoverIntent(hiConfig)
}
91419 次浏览
小开
最佳答案

Use the hoverIntent plugin for jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

It's absolutely perfect for what you describe and I've used it on nearly every project that required mouseover activation of menus etc...

There is one gotcha to this approach, some interfaces are devoid of a 'hover' state eg. mobile browsers like safari on the iphone. You may be hiding an important part of the interface or navigation with no way to open it on such a device. You could get round this with device specific CSS.

小开

You could use a setTimeout() call with a clearTimeout() on the mouseout event.

小开

You need to check a timer on hover. If it does not exist (ie this is the first hover), create it. If it exists (ie this is not the first hover), kill it and restart it. Set the timer payload to your code.

$(function() {
var timer;


$('#container a').hover(function() {
if(timer) {
clearTimeout(timer);
timer = null
}
timer = setTimeout(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, 500)
},
// mouse out
});
});

I bet jQuery has a function that wraps this all up for you.

Edit: Ah yes, jQuery plugin to the rescue

小开

My solution is easy. Delay open menu if user keeping mouseenter on obj over 300ms:

var sleep = 0;
$('#category li').mouseenter(function() {
sleep = 1;
$('#category li').mouseleave(function() {
sleep = 0;
});
var ob = $(this);
setTimeout(function() {
if(sleep) {
// [...] Example:
$('#'+ob.attr('rel')).show();
}
}, 300);
});
小开

Totally agree that hoverIntent is the best solution, but if you happen to be an unfortunate sod who works on a website with a long and protracted process for approval of jQuery plugins, here's a quick and dirty solution which worked well for me:

$('li.contracted').hover(function () {
var expanding = $(this);
var timer = window.setTimeout(function () {
expanding.data('timerid', null);


... do stuff


}, 300);
//store ID of newly created timer in DOM object
expanding.data('timerid', timer);
}, function () {
var timerid = $(this).data('timerid');
if (timerid != null) {
//mouse out, didn't timeout. Kill previously started timer
window.clearTimeout(timerid);
}
});

This one's just for expanding an <li> if the mouse has been on it for longer than 300ms.

小开

In 2016 Crescent Fresh's solution didn't work as expected for me, so I came up with this:

$(selector).hover(function() {
hovered = true;
setTimeout(function() {
if(hovered) {
//do stuff
}
}, 300); //you can pass references as 3rd, 4th etc. arguments after the delay


}, function() {
hovered = false;
});

提交答案