如何实现：鼠标悬停创建的DIV时阻止其被销毁，离开DIV后再销毁？

嘿，这个问题我之前也碰到过！核心问题就是鼠标从链接移到弹出DIV的瞬间，链接的mouseout事件会触发，导致DIV被误删对吧？别担心，有两种靠谱的解决办法，我给你详细说说：

咱先明确需求：只有当鼠标完全离开链接+弹出DIV这个整体区域时，才让DIV消失；鼠标在链接或DIV上时，DIV都得保持显示。

方式一：定时器缓冲+事件判断（兼容旧浏览器） #

这个方法的思路是：当鼠标离开链接时，先别急着删DIV，设置一个短暂的定时器。如果在定时器生效前，鼠标移到了DIV上，就取消定时器；如果定时器走完鼠标还没到DIV上，再删除DIV。同时给DIV绑定自己的鼠标事件，确保离开DIV时也能删掉它。

示例代码：

<a href="#" id="hoverLink">悬停我试试</a>
<script>
  const link = document.getElementById('hoverLink');
  let tooltipDiv = null;
  let hideTimer = null;

  // 鼠标悬停链接时创建提示DIV
  link.addEventListener('mouseover', () => {
    // 先清除之前的隐藏定时器，避免重复触发
    clearTimeout(hideTimer);
    if (!tooltipDiv) {
      tooltipDiv = document.createElement('div');
      tooltipDiv.textContent = '这是弹出的提示框';
      // 简单设置样式，你可以根据需求调整
      tooltipDiv.style.position = 'absolute';
      tooltipDiv.style.top = `${link.offsetTop + link.offsetHeight + 5}px`;
      tooltipDiv.style.left = `${link.offsetLeft}px`;
      tooltipDiv.style.padding = '8px';
      tooltipDiv.style.backgroundColor = '#f0f0f0';
      document.body.appendChild(tooltipDiv);

      // 鼠标移到DIV上时，取消隐藏定时器
      tooltipDiv.addEventListener('mouseover', () => {
        clearTimeout(hideTimer);
      });

      // 鼠标离开DIV时，删除DIV并清理变量
      tooltipDiv.addEventListener('mouseout', () => {
        if (tooltipDiv) {
          tooltipDiv.remove();
          tooltipDiv = null;
        }
      });
    }
  });

  // 鼠标离开链接时，设置延迟删除的定时器
  link.addEventListener('mouseout', () => {
    hideTimer = setTimeout(() => {
      if (tooltipDiv) {
        tooltipDiv.remove();
        tooltipDiv = null;
      }
    }, 200); // 200ms的延迟足够鼠标从链接移到DIV，可按需调整
  });
</script>

方式二：用mouseenter/mouseleave事件（更优雅，推荐） #

mouseenter和mouseleave跟mouseover/mouseout最大的区别是：它们不会因为子元素的存在而触发，只有当鼠标真正进入/离开元素本身时才会触发。我们可以把链接和DIV放在同一个父容器里，给父容器绑定这两个事件，这样只要鼠标在容器内（不管是链接还是DIV），DIV就不会消失；只有离开容器时才删掉它。

示例代码：

<div id="tooltipContainer">
  <a href="#" id="hoverLink">悬停我试试</a>
  <!-- 动态创建的DIV会放在这里 -->
</div>
<script>
  const container = document.getElementById('tooltipContainer');
  let tooltipDiv = null;

  // 鼠标进入容器时创建提示DIV
  container.addEventListener('mouseenter', () => {
    if (!tooltipDiv) {
      tooltipDiv = document.createElement('div');
      tooltipDiv.textContent = '这是弹出的提示框';
      tooltipDiv.style.marginTop = '5px';
      tooltipDiv.style.padding = '8px';
      tooltipDiv.style.backgroundColor = '#f0f0f0';
      container.appendChild(tooltipDiv);
    }
  });

  // 鼠标离开容器时删除提示DIV
  container.addEventListener('mouseleave', () => {
    if (tooltipDiv) {
      tooltipDiv.remove();
      tooltipDiv = null;
    }
  });
</script>

小提示 #

• 方式一的定时器延迟时间可以根据实际场景调整，100-300ms基本能覆盖大部分鼠标移动的情况。
• 方式二更简洁，代码量少还不容易出bug，推荐优先用这种方式。
• 不管哪种方法，都记得删除DIV时把变量置空，避免内存泄漏哦。

内容的提问来源于stack exchange，提问作者sunergos