Hover Intent:区分「路过」与「真的想看」
用 mouseenter 一触即发地展开菜单或预览,会在鼠标只是路过时频繁闪烁——指针从屏幕一角移到另一角,沿途每个项都被点亮一次。Hover Intent 给「打开」加一道判定:指针进入后停留超过阈值才真正触发,离开则带一点关闭延迟,避免在项与浮层之间穿行时误关。
本质是一个去抖 (debounce):把「进入」这个事件推迟 threshold 毫秒,若期间发生「离开」就取消。阈值是个权衡——太小(低于 100ms)形同没有,太大(超过 400ms)会让确有查看意图的用户感到迟滞。更精细的实现(jQuery
hoverIntent)不看停留时长而看移动速度:按固定间隔采样,比较相邻两次的位移,降到某个阈值以下才算「停下来了」,对快慢不一的手势更稳健。关闭延迟则解决另一个问题:浮层和触发区之间常有缝隙,延迟让指针得以跨过它。
enter 去抖加 leave 延迟关闭,两个 timer 而已:
el.addEventListener('mouseenter', () => {
clearTimeout(closeTimer);
openTimer = setTimeout(open, THRESHOLD); // 停够久才开
});
el.addEventListener('mouseleave', () => {
clearTimeout(openTimer); // 路过 → 取消打开
if (isOpen) closeTimer = setTimeout(close, CLOSE_DELAY);
});
注 · 它和 Safe Triangle 互补:Hover Intent 管开,区分路过与停留;Safe Triangle 管关,区分穿堂而过与真的离开。两者叠加,才有「不提前触发、也不中途消失」的多级菜单。