如何实现无重复提示的Pointer Lock效果？参考Figma拖拽交互

一、Chrome中让Pointer Lock提示仅显示一次的方法 #

Pointer Lock的提示是Chrome的安全机制，但可以通过复用锁定状态避免重复弹出：

• 首次通过用户交互（比如点击、拖拽触发）请求Pointer Lock后，不要主动调用document.exitPointerLock()，仅在用户主动按ESC退出时才会解除锁定
• 后续再次需要使用锁定功能时，直接复用已有的锁定状态，Chrome就不会重复显示提示
• 这和你观察到Figma偶尔出现一次提示的逻辑完全一致——只有首次请求锁定时会弹出，之后复用状态就不再显示

二、不使用Pointer Lock API的替代方案（复刻Figma交互） #

Figma的核心逻辑是隐藏真实光标+用自定义元素模拟+交互结束后重置鼠标位置，具体步骤：

1. 隐藏真实光标：给页面或目标操作区域设置cursor: none
2. 创建模拟光标：用div或svg制作自定义光标，通过CSS绝对定位跟随鼠标移动
3. 拦截交互事件：在mousedown时记录鼠标初始位置，mousemove时计算偏移量，用偏移量控制目标元素（比如调整矩形宽度），同时同步移动模拟光标
4. 重置鼠标位置：在mouseup时，调用window.moveTo()（必须在用户触发的事件回调内执行）将真实鼠标移回初始位置，同时恢复真实光标、隐藏模拟光标

注意：window.moveTo()有严格安全限制，只能在用户主动触发的事件（如mousedown、click）的回调中执行，否则浏览器会阻止该操作

三、核心代码示例 #

模拟光标+重置鼠标位置实现 #

let initialMouseX, initialMouseY;
const fakeCursor = document.getElementById('fake-cursor');
const targetRect = document.getElementById('target-rect');

// 绑定拖拽触发元素（比如右侧面板的宽度调节控件）
document.getElementById('width-control').addEventListener('mousedown', (e) => {
  // 记录初始鼠标位置
  initialMouseX = e.screenX;
  initialMouseY = e.screenY;
  
  // 隐藏真实光标，显示模拟光标
  document.body.style.cursor = 'none';
  fakeCursor.style.display = 'block';
  fakeCursor.style.left = `${e.clientX}px`;
  fakeCursor.style.top = `${e.clientY}px`;
  
  // 绑定后续事件
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', endDrag);
});

function handleDrag(e) {
  // 计算鼠标偏移量，用于调整矩形宽度
  const deltaX = e.screenX - initialMouseX;
  const currentWidth = parseInt(getComputedStyle(targetRect).width);
  targetRect.style.width = `${currentWidth + deltaX}px`;
  
  // 移动模拟光标
  fakeCursor.style.left = `${e.clientX}px`;
  fakeCursor.style.top = `${e.clientY}px`;
}

function endDrag() {
  // 重置真实鼠标位置
  window.moveTo(initialMouseX, initialMouseY);
  
  // 恢复真实光标，隐藏模拟光标
  document.body.style.cursor = 'auto';
  fakeCursor.style.display = 'none';
  
  // 移除事件监听
  document.removeEventListener('mousemove', handleDrag);
  document.removeEventListener('mouseup', endDrag);
}

复用Pointer Lock状态避免重复提示 #

let isPointerLocked = false;
const lockTrigger = document.getElementById('lock-trigger');

lockTrigger.addEventListener('click', async () => {
  if (isPointerLocked) return;
  try {
    await document.body.requestPointerLock();
    isPointerLocked = true;
  } catch (err) {
    console.error('Pointer Lock请求失败:', err);
  }
});

// 监听锁定状态变化，更新标记
document.addEventListener('pointerlockchange', () => {
  isPointerLocked = document.pointerLockElement === document.body;
});

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