如何规避鼠标悬停上下文菜单时触发mouseleave事件？

这个问题我做项目时也碰到过，核心就是要区分开「鼠标真的离开浏览器窗口」和「只是移到了上下文菜单（不管是自定义还是系统默认的）」这两种情况。下面给你几个针对性的解决方案：

1. 针对自定义上下文菜单的情况 #

如果你的右键菜单是自己用HTML/CSS实现的（属于页面DOM元素），最简单的方式就是在mouseleave事件里先判断鼠标是否正悬停在菜单上：

setTimeout(function() { 
  $(document).mouseleave(function(e) {
    // 假设自定义菜单的类名为.context-menu，检查鼠标是否在菜单上
    const isHoveringMenu = $('.context-menu').is(':hover');
    
    if (!isHoveringMenu && Cookies.get("visited_here") != 'exactly') {
      // 只有当鼠标不在菜单上且未标记过已访问时，才执行modal显示逻辑
      // $('.modal').css('display','block'); 
    }
  }); 
}, 5000);

你也可以通过事件的relatedTarget属性更精准判断，确保鼠标不是移向菜单元素或其子元素：

setTimeout(function() { 
  $(document).mouseleave(function(e) {
    const menu = $('.context-menu')[0];
    // 检查鼠标是否正移向菜单或菜单的后代元素
    const isMovingToMenu = menu && (e.relatedTarget === menu || menu.contains(e.relatedTarget));
    
    if (!isMovingToMenu && Cookies.get("visited_here") != 'exactly') {
      // $('.modal').css('display','block'); 
    }
  }); 
}, 5000);

2. 针对系统默认上下文菜单的情况 #

系统自带的右键菜单不属于页面DOM，没法直接通过元素判断。这时候可以用「延迟执行+鼠标回入取消」的思路来过滤：

setTimeout(function() { 
  let leaveTimer;
  
  $(window).mouseleave(function(e) {
    if (Cookies.get("visited_here") != 'exactly') {
      // 设置200ms延迟，给鼠标回到浏览器区域的时间
      leaveTimer = setTimeout(() => {
        // $('.modal').css('display','block'); 
      }, 200);
    }
  }).mouseenter(function() {
    // 鼠标回到浏览器窗口，说明刚才是打开了系统菜单，取消modal显示
    clearTimeout(leaveTimer);
  });
}, 5000);

原理很直观：打开系统右键菜单时，鼠标会短暂触发mouseleave，但很快又会回到菜单所在的屏幕区域（这时候会触发mouseenter），通过延迟和清除定时器就能过滤这种误触发情况。

3. 额外优化建议 #

• 优先把事件绑定在window而非document上：window的mouseleave更准确对应「鼠标离开浏览器窗口」的场景，比document的触发逻辑更稳定。
• 可以给modal的显示逻辑加防抖处理，避免极端场景下的频繁触发。

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