为什么mouseenter与mouseleave事件在移动设备上可以触发？

事件触发原因 #

你观察到的mouseenter、mouseleave在移动端触发的现象，是移动端浏览器的历史兼容机制导致的，和Vue框架、DOM标准无关。
早期大量站点仅针对桌面端做了hover交互适配，为了保证这类站点在移动端也能正常使用，主流移动端浏览器都实现了一套鼠标事件模拟逻辑：当用户点击页面元素时，会按顺序模拟触发mouseover、mouseenter、mousemove、mousedown、mouseup、click事件；当用户点击该元素外的其他区域时，会模拟触发原元素的mouseleave、mouseout事件，这就是你看到点击触发、点击外部自动关闭的原因。
你用原生JS可复现的结果也验证了这一点：事件转换是浏览器层做的兼容处理。

生产环境可用性说明 #

这个兼容逻辑已经存在十余年，Chrome、Safari、Firefox等主流移动端浏览器、系统内置webview都支持该逻辑，但不建议直接依赖该特性上线生产环境，存在以下隐患：

• 无标准化约束：该逻辑是浏览器厂商的自发兼容行为，没有W3C标准明确要求必须实现，小众浏览器、定制化内核的webview可能不支持该逻辑，会导致交互完全失效
• 触发延迟问题：移动端浏览器为了区分用户是点击操作还是滑动操作，模拟鼠标事件会自带约300ms的延迟，会导致tooltip弹出有明显的卡顿感，影响用户体验
• 交互冲突风险：如果页面同时绑定了touchstart、click等触摸/点击事件，和模拟触发的鼠标事件会出现逻辑冲突，可能出现单次点击触发多次交互的问题

推荐实现方案 #

建议针对不同设备做事件的针对性绑定，实现更稳定的跨端交互：

• 先判断设备是否支持触摸能力，可通过'ontouchstart' in window属性判断
• 桌面端（无触摸能力）：绑定mouseenter触发tooltip显示，mouseleave触发关闭
• 移动端（有触摸能力）：绑定click事件触发tooltip显示，同时监听全局点击事件判断点击区域是否在tooltip外，触发关闭
• 也可以直接使用成熟的社区交互工具库封装的hover、点击外部判断能力，降低自行兼容的成本

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