Javascript 没有jquery如何实现hoverintent？

我不想在我的所有页面中都包含jquery，但我在一个部分的悬停处添加了一个全局“弹出”菜单，但我不希望它立即出现，因为在移动鼠标时很烦人。通常我会使用jquery和hoverintent来实现这一点，但这次不行

我想我可以在该区域的

onmouseover

上设置一个超时，但不确定它是否那么简单（比如，当鼠标移动时，它不会发出数千次的声音吗？）

当前代码是这样的

<div onMouseOver="showCart();">Hover here!</div>

停在这里！

那么把它改成这项工作呢

<div onMouseOver="setTimeout(showCart, 50);">Hover here!</div>

停在这里！

好吧，我最初的尝试失败得很惨，但后来成功了

<div onmouseover="window.mycarthoverin = 1; setTimeout(showCart, 100);" onmouseout="window.mycarthoverin = 0;">Hover here!</div>

---

有人看到这种方法有问题吗？我可能不知道？

这里有一种非常简单的香草DOM方法。这需要一个id为

目标的元素（对于菜单项）和一个id为“dropdown”的元素

请注意，这使用了全局旧式的“on”处理程序，这可能不是最佳做法（您应该使用
addEventListener
），但是，我认为这使代码更具可读性：）

我还设置了一个JSFIDLE

var target=document.getElementById（'target'）；
var dropdown=document.getElementById（'dropdown'）；
库雷尔变种；
document.onmousemove=函数（e）{
e=e | | window.event；
curEl=e.target | | e.src元素；
}
target.onmouseover=函数（e）{
setTimeout（函数（）{
if（curEl==目标| | curEl==下拉列表）{
dropdown.style.display=“block”；
}否则{
dropdown.style.display=“无”；
}
}, 300);
}
target.onmouseout=dropdown.onmouseout=function（）{
setTimeout（函数（）{
if（curEl！==目标和&curEl！==下拉列表）{
dropdown.style.display=“无”；
}
}, 300);
}
提示：如果鼠标未在
div
上方，则必须清除超时。我总是担心在一个浏览器中工作，而不是在另一个浏览器中工作，因此可能其他浏览器更清楚我听说。。。它使用jQuery，所以我不会告诉您使用这个插件，但是代码可能是创建您自己的普通js解决方案的一个很好的资源。我指的是hoverintent上的这段代码，因为我记得hoverintent所做的不仅仅是设置超时（比如实际检查鼠标是否停止而不是在目标上移动）。@Ibstr我想你甚至可以将此作为一个答案发布。对于这个问题，除了阅读项目的源代码之外，没有其他合理的答案。（我也不明白为什么不使用jQuery或任何其他库）我只是很惊讶没有一种只使用javascript的“hoverintent”类型的东西看起来很有趣，但在IE中尝试了JSFIDLE，似乎不起作用（FF还可以）我已经更新了这个示例，使其在IE上工作。新的JSFIDLE在这里：它现在在IE中工作，谢谢。准备把它放在我的javascript库中，但我注意到JSFIDLE中可能有一些与之相关的东西。。。如果你从上到下快速地在其上运行鼠标，它工作正常，但是如果你从下到上快速运行鼠标（在CSS区域结束），它仍然会弹出。这看起来像是因为目标在页面的边缘，当你的鼠标离开页面时，它认为它的位置仍然在边缘（仍然在目标上）。如果你给目标增加了一些利润，问题就消失了。我不知道如何修复它，否则…我知道我迟到了。。。但这应该很有效。但这不是我的意图。。。hoverintent在确定用户“有意”将鼠标悬停在某物上时抛出自定义事件。它是这样做的时候。
if (window.mycarthoverin == 1) {
  ...
}