延迟jquery悬停事件？
延迟jquery悬停事件？
提问于 2009-01-12 15:22:22
我想在jquery中延迟一个悬停事件。当用户将鼠标悬停在链接或标签上时，我正在读取文件。我不希望这个事件立即发生，以防用户只是在屏幕上移动鼠标。有没有办法延迟事件的触发？
谢谢。
示例代码：
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});更新： (1/14/09)添加HoverIntent插件后，上面的代码被更改为以下代码以实现它。实现起来非常简单。
$(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)
}回答 6
Stack Overflow用户
回答已采纳
发布于 2009-01-12 15:31:16
使用jquery的hoverIntent插件：http://cherne.net/brian/resources/jquery.hoverIntent.html
它完全符合你的描述，我几乎在每个需要鼠标悬停激活菜单的项目中都使用过它。
这种方法有一个问题，一些接口没有“悬停”状态，例如。像iphone上的safari一样的移动浏览器。您可能隐藏了界面或导航的重要部分，但无法在这样的设备上打开它。你可以用特定于设备的CSS来解决这个问题。
Stack Overflow用户
发布于 2009-01-12 15:40:28
你需要在悬停时检查计时器。如果它不存在(即这是第一次悬停)，则创建它。如果它存在(即这不是第一次悬停)，杀死它并重新启动它。将计时器有效负载设置为您的代码。
$(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
});
});我敢打赌，jQuery有一个函数可以帮你完成这一切。
编辑:啊是的，jQuery plugin to the rescue
Stack Overflow用户
发布于 2011-12-08 22:25:43
完全同意hoverIntent是最好的解决方案，但是如果你碰巧是一个不幸的草帽，在一个网站上工作，有一个漫长而漫长的jQuery插件审批过程，这里有一个快速而肮脏的解决方案，对我来说效果很好：
$('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);
}
});如果鼠标停留的时间超过300ms，则此命令仅用于扩展。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/435732
复制相关文章
相似问题
腾讯云开发者
