【发布时间】：2013-10-31 04:35:44
【问题描述】：
我目前正在尝试制作一个小型 html5 画布游戏。 我希望我的鼠标指针停留在 div 元素或画布边界内。
请指出正确的方向。
【问题讨论】：
标签： javascript html canvas mouse-cursor pointerlock
【发布时间】：2013-10-31 04:35:44
【问题描述】：
您可以使用新的Pointer Lock API。现在 Chrome、Firefox、Edge、Opera 和 Safari 都支持它。
摘自上面链接的文章（我的重点）：
Pointer Lock API（以前称为 Mouse Lock API）提供基于鼠标随时间移动（即增量）的输入方法，而不仅仅是鼠标光标在视口中的绝对位置。它使您可以访问原始鼠标移动，将鼠标事件的目标锁定到单个元素，消除对鼠标在单个方向上移动距离的限制，并从视图中移除光标。例如，它非常适合第一人称 3D 游戏。
不仅如此，该 API 对于需要大量鼠标输入来控制移动、旋转对象和更改条目的任何应用程序都很有用，例如，允许用户通过在不点击任何按钮的情况下移动鼠标来控制视角。然后释放按钮以执行其他操作。其他示例包括用于查看地图或卫星图像的应用程序。
即使光标超出浏览器或屏幕的边界，指针锁定也可让您访问鼠标事件。例如，您的用户可以通过不停地移动鼠标来继续旋转或操作 3D 模型。如果没有指针锁定，旋转或操作会在指针到达浏览器或屏幕边缘的那一刻停止。游戏玩家现在可以单击按钮并来回滑动鼠标光标，而不必担心离开游戏区域并意外单击另一个会导致鼠标焦点离开游戏的应用程序。
请参阅链接以获取示例。
【讨论】：
-
+1 有趣的发现——类固醇上的鼠标捕获。轻笑：“我们可以控制您的鼠标。在您点击立即购买按钮之前，我们不会释放您的鼠标……”
-
@markE 可能是一个有趣的场景 :) 幸运的是，系统会提示用户接受锁定（与 f.ex. 全屏模式一样）。