如何使用原生JS实现右键按住时在光标位置显示div

核心改造方向 #

原有代码绑定左键click事件做显隐切换，和需求的长按右键触发、跟随移动逻辑不匹配，需要做三类调整：

• 移除原有左键click的事件监听逻辑
• 基于鼠标原生按下、移动、抬起事件做全流程状态控制
• 增加长按计时器，判定右键按下时长达到阈值后再显示div，避免误触

关键实现注意点 #

• 鼠标事件中button === 2对应右键触发，所有右键相关逻辑都需要加这个判定，避免左键操作干扰
• 浏览器默认右键按下会弹出系统菜单，需要监听contextmenu事件并阻止默认行为，否则会打断交互逻辑
• 不需要做显隐切换，仅在长按触发后显示div，右键抬起/长按未达阈值时保持隐藏即可

完整JS代码 #

// 长按触发延迟，可自定义调整（单位：毫秒）
const TRIGGER_DELAY = 300;
// 状态标记
let pressTimer = null;
let isTriggered = false;
const targetDiv = document.querySelector('#item');

// 监听鼠标按下
window.addEventListener('mousedown', (e) => {
  // 仅响应右键按下
  if (e.button !== 2) return;
  isTriggered = false;
  // 启动长按计时
  pressTimer = setTimeout(() => {
    isTriggered = true;
    targetDiv.classList.remove('d-none');
  }, TRIGGER_DELAY);
})

// 监听鼠标移动
window.addEventListener('mousemove', (e) => {
  // 仅在长按触发后更新div位置
  if (!isTriggered) return;
  // 计算位置，让div中心对齐光标
  targetDiv.style.transform = `translate(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%))`;
})

// 监听鼠标抬起
window.addEventListener('mouseup', (e) => {
  // 仅响应右键抬起
  if (e.button !== 2) return;
  // 清理计时器，重置状态，隐藏div
  clearTimeout(pressTimer);
  isTriggered = false;
  targetDiv.classList.add('d-none');
})

// 阻止默认右键菜单弹出
window.addEventListener('contextmenu', (e) => {
  e.preventDefault();
})

自定义调整项 #

• 修改TRIGGER_DELAY的数值，可调整需要按住右键的时长，比如设为1000即按住1秒才触发显示
• 若需要光标移出浏览器窗口时自动隐藏div，可额外给window绑定blur事件，在回调中执行状态重置和div隐藏的逻辑
• 原有代码中getXYPosition函数内的显隐切换逻辑需要完全移除，否则会和新的状态控制逻辑冲突

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