前言

鼠标捕获是可视化开发中非常重要的功能。当可视对象捕获鼠标时，所有与鼠标相关的事件都被视为具有鼠标捕获的对象执行该事件，即使鼠标指针在另一个对象上，甚至完全在该外部viewport。要了解pointerjs的工作原理，我们必须了先解有关事件（Capture和Bubble）和CustomEvents。

技术比较

其他鼠标API ，DragDrop和PointerLockAPI或多或少具有相似的功能，但要准确，它们的目标范围和用例有很大差异。

指针锁API

从MDN提供基于鼠标随时间移动（即，三角形）的输入方法，而不仅仅是鼠标光标在视口中的绝对位置。它允许您访问原始的鼠标移动，将鼠标事件的目标锁定到单个元素，消除了鼠标移动在单个方向上可以走多远的限制，并将光标从视图中移除。它是第一人称3D游戏的理想选择。

为什么不使用指针锁API作为解决方法？

• 适合3D游戏。

• 它隐藏光标。

拖放API

从MDN，用户可以选择可拖动用鼠标元件，元件拖动到可投放元件，并且通过释放鼠标按钮下降的那些元素。可拖动元素的半透明表示在拖动操作期间跟随鼠标指针。

为什么不使用Drag Drop API作为解决方法？

• 适用于数据和文件传输。

• 它创建了可拖动元素的另一个半透明视觉表示，这不适用于许多情况

• 事件仅在可拖动和可拖放的元素上可用。

• 即使在本机应用程序中，如果数据丢失到网页外，也可以将数据移动到应用程序之外。

PointerJS

PointerJS是一个小类库，为鼠标捕获提供了一个方便，轻量级和跨浏览器的实现。它是纯JavaScript，因此它可以处理任何JavaScript。pointerjs背后的想法是在文档级别检测捕获状态中的指针事件，并将其重定向到捕获的DOM（如果找到）。

怎么运行的

作为一个基本的想法，PointerJS增加了文档对象上侦听所有指针相关的事件来检测本机浏览器事件（mousemove，mousedown，mouseup，mousewheel，click）。这些听众执行以下操作：

1. 如果没有捕获的元素捕获元素或正常传递元素，则防止当前事件传播。

2. 创建一个新的CustomEvent，并将其传递给捕获的对象（如果找到）。

3. 保存指针clientX，clientY作为当前鼠标的位置，所以我们可以知道其他事件，例如键盘事件鼠标的位置。

示例

drag事件

对象拖动取决于添加旧的和当前的鼠标位置与当前的对象位置之间的差异...

...在鼠标上捕获鼠标down =>移动鼠标上的对象move =>鼠标向上释放对象。

要注意的是，在计算新位置后，我们将当前鼠标位置设置为下一步的旧位置。

p = pp;

代码如下：

draw事件

代码如下：

调整大小

通过鼠标调整容器大小的过程，大家有兴趣的，可以自己尝试实现一下。