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 link 上，那么 onmouseover 只会被触发一次并且您的 h1 div 将不会显示向上。

如果鼠标光标移动得太慢，seth1() 将被调用多次，因此会为 settime 分配多个值。如果 settime 被覆盖，第一个（少数）呼叫不能再被取消，因为他们的 ID 已经消失。

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

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

Answer 2

发生这种情况是因为要单击元素 <a onclick="showh2();">h2</a>，您必须在包装器 div 中触发鼠标悬停事件。如果您不想在单击该元素时触发鼠标悬停，您应该将事件侦听器应用于同一元素并将其从包装器中删除 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()一次。非常感谢您的帮助！

JavaScript onmouseover 没有按预期工作

JavaScript onmouseover not working as expected

html

javascript

mouseevent

dom-events