如果未经过时间，取消鼠标悬停

Cancelling mouseover if time not elapsed

本文关键字：取消 鼠标 悬停 时间 经过 如果      更新时间：2023-09-26

如果有人将鼠标悬停在文本框上一秒钟，我想显示一个div。但我不希望它显示如果他们只是快速地将鼠标悬停在文本框上。

<input type="text" value="Fred" onmouseover="overit()">
<div id="dv" style="display:none">Jim</div>
var delay;
function overit()
{
delay = window.setTimeout('showme();', 1000);
}
function showme()
{
document.getElementById('dv').style.display = 'block';
}

除非有人将鼠标悬停在文本框上一秒钟，否则我不想调用showme()。如果鼠标移过和鼠标移出之间的间隔不至少一秒，我如何取消showme()被调用?

拨弄http://jsfiddle.net/S4jx4/

我不想使用jquery

你提出的解决方案基本可行。在输入端添加onmouseout监听器，取消超时

<input type="text" value="Fred" onmouseover="overit()" onmouseout="window.clearTimeout(delay);">
http://jsfiddle.net/TN952/

你知道函数将在1秒后被调用，所以你不需要检查间隙是否存在，你只需要在mouseleave发生时取消超时。如果它已经被调用了，那么它被调用的时间不到一秒，取消它不会影响任何事情。

var delay;
function overit()
{
    delay = window.setTimeout('showme();', 1000);
}
function showme()
{
    document.getElementById('dv').style.display = 'block';
}
function leaveit() {
    window.clearTimeout(delay);   
}
<input type="text" value="Fred" onmouseenter="overit()" onmouseleave="leaveit()">
<div id="dv" style="display:none">Jim</div>
http://jsfiddle.net/hXE28/

删除内联javascript

<input type="text" value="Fred" id="txt" />
<div id="dv" style="display:none">Jim</div>

和使用事件监听器

var input = document.getElementById('txt'),
    text  = document.getElementById('dv'),
    timer;
input.addEventListener('mouseenter', function() {
    timer = setTimeout(showme, 1000);
}, false);
input.addEventListener('mouseleave', function() {
    clearTimeout(timer);
}, false);
function showme() {
    text.style.display = 'block';
}

小提琴

相关文章：