编程触发mouseenter后离开元素为何不自动触发mouseleave事件？

这个问题和Next.js框架本身无关，属于DOM原生事件的标准行为：浏览器原生mouseenter/mouseleave的配对触发逻辑，完全依赖自身维护的真实鼠标指针位置状态机，脚本手动派发的合成事件不会介入这个状态流转：

• 你通过dispatchEvent触发的mouseenter事件，只会同步执行绑定的事件回调，不会更新浏览器内部记录的「元素当前是否处于真实悬停状态」的标记。
• 浏览器自动触发mouseleave的前置条件是：内部状态确认该元素此前处于真实鼠标悬停态，且指针已经移出元素边界。由于你手动触发的事件根本没有被浏览器纳入悬停状态的判断逻辑，自然不会在后续鼠标移动时自动配对触发mouseleave。
• 你代码里构造的是基础Event实例，连clientX/clientY这类鼠标事件专属的坐标属性都不存在，浏览器从事件特征上也能识别出这不是真实用户触发的鼠标交互，不会修改原生交互状态。哪怕你改用new MouseEvent('mouseenter')构造事件、补全所有参数，只要是脚本主动派发的，依然不会触发原生hover状态更新，连CSS的:hover伪类都不会生效。

• 最优方案：不要通过派发原生鼠标事件的方式模拟悬停，直接在你的useHover自定义钩子中暴露手动修改悬停状态的方法，业务需要手动触发悬停逻辑时直接调用方法修改状态即可，不需要绕路派发事件。参考实现：

import { useState, useEffect, useRef } from 'react'

const useHover = () => {
  const ref = useRef(null)
  const [isHover, setIsHover] = useState(false)

  useEffect(() => {
    const el = ref.current
    if (!el) return

    const handleEnter = () => setIsHover(true)
    const handleLeave = () => setIsHover(false)

    el.addEventListener('mouseenter', handleEnter)
    el.addEventListener('mouseleave', handleLeave)

    return () => {
      el.removeEventListener('mouseenter', handleEnter)
      el.removeEventListener('mouseleave', handleLeave)
    }
  }, [])

  // 直接暴露状态和手动修改方法，替代手动dispatch事件的逻辑
  return { ref, isHover, setHover: setIsHover }
}

• 不推荐的兜底方案：如果你一定要走事件派发的逻辑，就需要在手动触发mouseenter之后，自行绑定一次性的鼠标移出/移动监听，判断指针离开元素边界时手动触发mouseleave逻辑，这种方案冗余度高、容易出现边界case，非必要不要用。

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