Javascript 图像映射-如何在鼠标悬停和仅当鼠标停止时显示工具提示

我是一名javascript初学者，在正确显示图像映射的工具提示（作为div）时遇到了问题

我希望工具提示仅在光标位于某个元素（在标记中定义）上以及鼠标停在该元素上时显示

我不知道为什么添加的addEventListener方法会在onmouseout事件执行后（即光标离开给定元素时）显示工具提示

函数myFuncHide（el）{
var tooltip=document.getElementById（'myTooltip'）；
tooltip.style.display='none'；
}
函数myFunc（el）{
var tooltip=document.getElementById（'myTooltip'）；
var超时；
document.addEventListener（“mousemove”，移动）；
函数移动（）{
if（超时）cleartimout（超时）；
timeout=setTimeout（mouseStop，450）；}
函数mouseStop（）{
var tooltip=document.getElementById（'myTooltip'）；
tooltip.style.display='block'；}
}

#我的工具提示{
填充：15px；
背景：rgba（0,0,0,5）；
颜色：白色；
位置：绝对位置；
显示：无；
}

您的

mousemove

侦听器位于

文档

对象上，并且无论鼠标移动到哪里都保持有效（事实上，当您进入该区域时，其他侦听器会不断堆积）

下面是一个代码重排，它将清除添加到

mouseout

事件中。它删除侦听器并清除超时变量

此外，我还为您做了一些常规代码清理。更好的函数名。删除了一些冗余（请记住不要重复）。缩进：）

---

您可以在此处看到工作版本：。

您的

mousemove

侦听器位于

文档

对象上，并且无论鼠标移动到何处都保持有效（事实上，当您进入该区域时，其他侦听器会不断堆积）

下面是一个代码重排，它将清除添加到

mouseout

事件中。它删除侦听器并清除超时变量

此外，我还为您做了一些常规代码清理。更好的函数名。删除了一些冗余（请记住不要重复）。缩进：）

---

您可以在这里看到工作版本：。

这正是我所期望的；-）伟大的工作和澄清。谢谢！没问题！如果你不介意，你能接受我的回答吗？：）这正是我所期望的；-）伟大的工作和澄清。谢谢！没问题！如果你不介意，你能接受我的回答吗？：）

var timeout;
var tooltipEl = document.getElementById('myTooltip');

function mouseMoving() {
  if (timeout) clearTimeout(timeout);
  
  timeout = setTimeout(function() {
     tooltipEl.style.display = 'block';
  }, 450);
}

function ingress () {
  document.addEventListener('mousemove', mouseMoving);
}

function egress() {
  // cleanup
  if (timeout) clearTimeout(timeout)
  document.removeEventListener("mousemove", mouseMoving)
  
  tooltipEl.style.display = 'none';
}