DOM事件时序：同时事件与setTimeout对比及容器hover异常问询

哈哈，这个坑我刚入门JS的时候也踩过！你写的代码在简单场景下能用，但碰到带子元素的容器就拉胯，核心问题出在你用的mouseover和mouseout这俩事件的特性上——它们会因为鼠标在容器的子元素间移动就误触发离开事件。

最简单的修复：换用mouseenter和mouseleave #

这俩事件就是专门为这种嵌套元素的hover场景设计的！它们只会在鼠标**真正进入/离开整个容器区域（包括所有子元素）**时触发，完全不会被子元素干扰。修改后的代码如下：

var onHover = function (el, f) {
  el.addEventListener('mouseenter', function () {
    f(true);
  });
  el.addEventListener('mouseleave', function () {
    f(false);
  });
};

为啥原代码会出问题？给你捋清楚： #

两类事件的核心区别： #

• mouseover/mouseout：
  • 鼠标进入/离开元素本身或其子元素时都会触发
  • 支持事件冒泡，子元素的事件会向上传递给父元素
• mouseenter/mouseleave：
  • 仅当鼠标真正进入/离开整个元素（含所有子元素的区域）时触发
  • 不支持事件冒泡，不会被子元素的操作干扰

简单来说，mouseover/mouseout管得太细，连你在容器内部子元素间移动都算“离开容器”；而mouseenter/mouseleave只看你有没有跨过容器的外边界，完美匹配你的需求！

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