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()多次调用seth1() ，因此将多个值分配给settime 。 如果settime被覆盖，则第一个（很少）调用无法取消，因为它们的ID已消失。

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

自己进行测试，检查控制台日志： https : //jsfiddle.net/krbbyzaq/2/

Answer 2

发生这种情况的原因是，为了单击元素<a onclick="showh2();">h2</a> ，您必须在包装div中触发mouseover事件。 如果您不想在单击该元素时触发鼠标悬停，则应将事件侦听器应用于相同的元素并将其从包装div中删除。 您还应该尝试探索onmouseenter事件。 它可以更好地满足您的特定需求。

检查此示例以查看您是否在寻找它-> https://jsfiddle.net/krbbyzaq/4/

Answer 3

谢谢两个人的帮助。 现在我更好地了解了我的问题。 我终于解决了：

HTML

<div id="setter" onmouseover="seth1();" style="height: 10px; width: 100%;">
<div>
    <a onclick="showh1();">h1</a>
    <a onclick="showh2();">h2</a>
</div>

JavaScript的

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

因此，用户只能触发一次seth1（）。 非常感谢您的帮助！