JavaScript onmouseover 未按预期工作

Question

我有这个 HTML:

<div onmouseover="seth1();">
    <a onclick="showh1();">h1</a>
    <a onclick="showh2();">h2</a>
</div>

<div id="h1" style="display: none;"></div>
<div id="h2" style="display: none;"></div>

此 Javascript 将在 4 秒后自动显示 h1 或在用户单击时显示两者之一:

var settime;
function seth1() {
    settime = setTimeout('showh1();', 4000);
}
function showh1() {
    clearTimeout(settime);
    document.getElementById('h1').style.display = "block";
}
function showh2() {
    clearTimeout(settime);
    document.getElementById('h2').style.display = "block";
}

但是当我点击显示h2时，它也显示了h1，我错在哪里？

Answer 1

您的示例运行得很好，但是发生了您可能没有预料到的事情。

如果您用鼠标光标瞄准得太慢，

onmouseover 会被多次触发。如果您能够快速将鼠标光标设置到 h2 链接上，则 onmouseover 只会被触发一次，而您的 h1 div 将不会被触发出现。

如果您移动鼠标光标太慢，seth1() 将被多次调用，因此会为 settime 分配多个值。如果 settime 被覆盖，则第一个(少数)调用将无法再取消，因为它们的 ID 已消失。

在您的 showh2() 方法中，您访问 settime 的当前值，因此可能只会取消 seth1() 的最后一次调用。所有其他内容都会继续，因此您的 h1 DIV 将在您第一次将鼠标悬停在第一个 DIV 上四秒后显示。

自己测试一下，查看控制台日志:https://jsfiddle.net/krbbyzaq/2/