Javascript 仅当鼠标悬停在元素上至少 1 秒时，如何触发鼠标悬停事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6231052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have a mouseover event fire only if the mouse is hovered over an element for at least 1 second?
提问by John Conde
I want to display a dialog when a user mouses over a certain image. That part works. Unfortunately if the mouse even just passes over the corner of the image quickly it will display the dialog. I would like to have the dialog show only if the mouse is left over the image for one full second so as to avoid inadvertent pop ups.
当用户将鼠标悬停在某个图像上时，我想显示一个对话框。那部分工作。不幸的是，如果鼠标甚至只是快速通过图像的角落，它就会显示对话框。我希望仅当鼠标在图像上停留一整秒时才显示对话框，以避免无意中弹出窗口。
I saw this questionbut it is for jQuery and I am using Prototype. I don't know enough jQuery to interpret that solution.
我看到了这个问题，但它是针对 jQuery 的，我正在使用 Prototype。我不知道足够的 jQuery 来解释该解决方案。
If someone could explain the logic or JavaScript functionality that will be required to cause a delayed firing of the mouseover event I would appreciate it.
如果有人可以解释导致鼠标悬停事件延迟触发所需的逻辑或 JavaScript 功能，我将不胜感激。
回答by Robert
You can't delay the firing of the event, but you can delay your handling of the event.
你不能延迟事件的触发，但你可以延迟你对事件的处理。
Here's a quick example without jQuery or Prototype that will make it easier to understand.
这是一个没有 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");
});
回答by Mareg
I inspired by Robert (thanks) and for to loading data detail from table I use this:
我受到罗伯特（感谢）的启发，并且为了从表中加载数据详细信息，我使用了这个：
<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)">
And function for load data
和加载数据的功能
function fLoadDatDetail(vZadId) {
$("#divId").load("/controller/function/"+vZadId);
}
You must keep mouse 1 second over one row of the <TABLE>, to get details of it.
您必须将鼠标悬停在 的一行上 1 秒钟<TABLE>才能获得详细信息。
回答by Mertis
check out the hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.htmlit will do exactly what you want.
查看hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html它会做你想要的。
I usually dont post links to answers but it is easy to use and would be good to read over it and learn it.
我通常不会发布答案链接，但它很容易使用，阅读并学习它会很好。
回答by Matt Razza
The logic is as follows:
逻辑如下：
When the mouse moves over the object a timer is created that will trigger in 1000 milliseconds. When the mouse moves off the object, if the timer has not yet triggered, the timer is disabled and removed from memory preventing it from triggering.
当鼠标在对象上移动时，会创建一个计时器，该计时器将在 1000 毫秒内触发。当鼠标移离对象时，如果计时器尚未触发，则计时器将被禁用并从内存中移除以防止其触发。
