我想在用户将鼠标悬停在特定图像上时显示一个对话框。这个部分已经可以实现。不幸的是,如果鼠标只是快速通过图像的角落,它就会显示对话框。我希望只有当鼠标悬停在图像上一整秒钟时才显示对话框,以避免意外弹出。
我看到了这个问题,但它是针对jQuery的,而我正在使用Prototype。我不知道足够的jQuery来解释那个解决方案。
如果有人能解释一下将需要哪些逻辑或JavaScript功能来导致延迟触发mouseover事件,我将不胜感激。
我想在用户将鼠标悬停在特定图像上时显示一个对话框。这个部分已经可以实现。不幸的是,如果鼠标只是快速通过图像的角落,它就会显示对话框。我希望只有当鼠标悬停在图像上一整秒钟时才显示对话框,以避免意外弹出。
我看到了这个问题,但它是针对jQuery的,而我正在使用Prototype。我不知道足够的jQuery来解释那个解决方案。
如果有人能解释一下将需要哪些逻辑或JavaScript功能来导致延迟触发mouseover事件,我将不胜感激。
你无法延迟事件的触发,但是你可以延迟对事件的处理。
以下是一个不使用jQuery或Prototype的快速示例,可以让它更容易理解。
var delay = function (elem, callback) {
var timeout = null;
elem.onmouseover = function() {
// Set timeout to be a timer which will invoke callback after 1s
timeout = setTimeout(callback, 1000);
};
elem.onmouseout = function() {
// Clear any timers set to timeout
clearTimeout(timeout);
}
};
delay(document.getElementById('someelem'), function() {
alert("Fired");
});
我受到Robert的启发(感谢他),为了从表格中加载数据详情,我使用了以下方法:
<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)">
加载数据的函数
function fLoadDatDetail(vZadId) {
$("#divId").load("/controller/function/"+vZadId);
}
您需要将鼠标悬停在 <TABLE>
的一行上超过1秒钟,才能获取其详细信息。
请查看hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html。它会做你想要的事情。
我通常不在回答中发布链接,但这很容易使用,并且阅读并学习它会很有帮助。
这对我们的团队很有效(类似于Robert的回答):
window.myShowToolTipFunction = function(element) {
var timeout = setTimeout(function () {
showTooltip(element);
}, 300);
$(element).on('mouseleave.recordHover', function () {
clearTimeout(timeout);
});
}
并且
function showTooltip(element){
// do your stuff here
}