如何实现仅长按鼠标左键N秒后才显示context-menu？

核心逻辑 #

通过定时器管控长按时长，结合手动触发右键菜单插件，同时拦截默认事件确保只有满足时长条件才显示菜单：

• 鼠标左键按下时启动定时器，达到指定时长后标记允许显示菜单并手动触发
• 鼠标抬起或移出元素时立即清除定时器，重置允许标记并隐藏菜单
• 拦截默认右键菜单事件，仅当标记为允许时才放行

具体代码（基于jQuery ContextMenu插件） #

// 全局变量控制状态
let longPressTimer = null;
let allowContextMenu = false;
const LONG_PRESS_DURATION = 2000; // 长按触发时长，单位毫秒

// 初始化右键菜单插件，禁用默认触发方式
$(document).contextmenu({
  selector: '.target-element', // 替换为你的目标元素选择器
  trigger: 'none', // 完全手动控制触发时机
  menu: [
    {title: '操作选项1', cmd: 'opt1'},
    {title: '操作选项2', cmd: 'opt2'}
  ],
  // 菜单显示后重置状态
  onShow: function() {
    allowContextMenu = false;
  }
});

// 监听鼠标按下事件（仅处理左键）
$('.target-element').on('mousedown', function(e) {
  if (e.button !== 0) return; // 非左键直接返回
  
  allowContextMenu = false;
  // 启动长按定时器
  longPressTimer = setTimeout(() => {
    allowContextMenu = true;
    // 手动触发菜单显示
    $(this).contextmenu('show');
  }, LONG_PRESS_DURATION);
});

// 监听鼠标抬起事件，终止定时器并重置状态
$('.target-element').on('mouseup', function() {
  clearTimeout(longPressTimer);
  if (!allowContextMenu) {
    $(this).contextmenu('hide'); // 未满足时长则隐藏菜单（若已误触发）
  }
});

// 监听鼠标移出事件，防止鼠标离开后仍触发菜单
$('.target-element').on('mouseout', function() {
  clearTimeout(longPressTimer);
  allowContextMenu = false;
  $(this).contextmenu('hide');
});

// 拦截默认右键菜单事件，确保仅允许时触发
$(document).on('contextmenu', '.target-element', function() {
  return allowContextMenu;
});

关键注意事项 #

1. 必须设置trigger: 'none'，禁用插件的默认触发逻辑，避免和手动控制冲突
2. 鼠标移出元素时也要清除定时器，防止用户长按过程中移开鼠标仍触发菜单
3. 菜单显示后立即重置allowContextMenu，避免后续误触发

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