Pointer events 指针事件-技术圈

在JavaScript中，onpointermove是一个事件处理程序属性，用于处理指针移动事件。你可以将它与一个函数关联起来，以便在指针（通常是鼠标）移动时触发该函数。下面是一个简单的示例代码，演示如何在HTML中使用onpointermove：

      
        
          <!DOCTYPE html>
        
      
      
        
          <html>
        
      
      
        
          <head>
        
      
      
            <title>Pointer Move Event Example</title>
      
      
        
          </head>
        
      
      
        
          <body>
        
      
      
            <div id="myElement" style="width: 200px; height: 200px; background-color: lightblue;"></div>
      
      
        
          

      
      
            <script>
      
      
                // 获取要监听事件的元素
      
      
                var element = document.getElementById('myElement');
      
      
        
          

      
      
                // 添加指针移动事件监听器
      
      
                element.onpointermove = function(event) {
      
      
                    console.log('Pointer moved at X: ' + event.clientX + ', Y: ' + event.clientY);
      
      
                };
      
      
        
          </script>
        
      
      
        
          </body>
        
      
      
        
          </html>

在这个示例中，当鼠标在myElement元素上移动时，控制台会输出指针的X和Y坐标。你可以根据需要修改事件处理程序中的代码来执行你想要的操作。

指针事件

目前绝大多数的 Web 内容都假设用户的指针定点设备为鼠标。然而，近年来的新兴设备支持更多不同方式的指针定点输入，如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型，以有效追踪各类指针事件。

指针事件 - Pointer events 是一类可以为定点设备所触发的 DOM 事件。它们被用来创建一个可以有效掌握各类输入设备（鼠标、触控笔和单点或多点的手指触摸）的统一的 DOM 事件模型。所谓指针是指一个可以明确指向屏幕上某一组坐标的硬件设备。建立这样一个单独的事件模型可以有效的简化 Web 站点与应用所需的工作，同时也便于提供更加一致与良好的用户体验，无需关心不同用户和场景在输入硬件上的差异。另外，对于某些需要处理特定设备的场景，指针事件也定义了一个 pointerType (en-US) 属性用以查看触发事件的设备类型。

这些事件需要能够处理 mouse events 之类较为通用的指针输入（mousedown/pointerdown, mousemove/pointermove, 等）。因此，指针事件的类型，很大程度上类似于当前的鼠标事件类型。

此外，一个指针事件，也同时包含了鼠标事件中所常见的属性（client coordinates, target element, button states，等）以及适用于其他输入设备的新属性：pressure, contact geometry, tilt，等等。实际上，PointerEvent 接口继承了所有 MouseEvent 中的属性，以保障原有为鼠标事件所开发的内容能更加有效的迁移到指针事件。

PointerEvent

首要的接口为 PointerEvent 接口，该接口由一个构造函数constructor (en-US) 加上一些事件类型以及相应全局事件的处理方法构成。

标准中还包括一些对于 Element 及 Navigator 接口的扩展。接下来的每个部分包含了对于各个接口与属性的简单说明。

PointerEvent 接口扩展了 MouseEvent 接口，并含有以下属性（这些属性的可写属性全部为只读）。

1、pointerId - 对于某个由指针引起的事件的唯一标识。

2、width - 以 CSS 像素计数的宽度属性，取决于指针的接触面的几何构成。

3、height - 以 CSS 像素计数的高度属性，取决于指针的接触面的几何构成。

4、pressure - 规范化后的指针输入的压力值，取值范围为 0 到 1，0 代表硬件可检测到的压力最小值，1 代表最大值。

5、pointerType - 表明引发该事件的设备类型（鼠标/笔/触摸等）。

6、isPrimary - 表示该指针是否为该类型指针中的首选指针。

事件类型

指针事件有始终不同的事件类型，其中其中在鼠标事件中有相对应的语义话表示 (down, up, move, over, out, enter, leave)。

1、pointerover 当定点设备进入某个元素的命中检测范围时触发。

2、pointerenter 当定点设备进入某个元素或其子元素的命中检测范围时，或做为某一类不支悬停（hover）状态的设备所触发的 poinerdown 事件的后续事件时所触发。

3、pointerdown 当某指针得以激活时触发。

4、pointermove 当某指针改变其坐标时触发。

5、pointerup 当某指针不再活跃时触发。

6、pointercancel 当浏览器认为某指针不会再生成新的后续事件时触发（例如某设备不再活跃）

7、pointerout 可能由若干原因触发该事件，包括：定位设备移出了某命中检测的边界；不支持悬浮状态的设备发生 pointerup 事件；作为 pointercancel 事件的后续事件；当数位板检测到数位笔离开了悬浮区域时。

8、pointerleave 当定点设备移出某元素的命中检测边界时触发。对于笔形设备来说，当数位板检测到笔移出了悬浮范围时触发。

9、gotpointercapture 当某元素接受到一个指针捕捉时触发。

10、lostpointercapture 当针对某个指针的指针捕捉得到释放时触发。

确定首选指针

在很多场景中，可能存在多个指针（比如某设备同时拥有触摸屏和鼠标）或者一个指针设备支持多个接触点（例如支持多点触控的触摸屏）。应用开发时，可以使用isPrimary (en-US)属性来识别每类指针的一组指针输入中的主要指针。如果应用仅希望对首选指针提供支持，则可以忽略其他的指针事件。

对于鼠标来说，只有一个指针输入，所以这一输入将一直是首选指针。对于触摸输入来说，当用户在触摸屏幕，且没有其他活跃指针时，会被认做首选指针。对于压感笔输入来说，当用户的笔触开始接触屏幕或平面，且当时没有其他的活跃笔触在接触屏幕时，该输入将被认作首选指针。

区别

onpointermove和ontouchmove是用于处理不同类型事件的两个事件处理程序属性。

1、 onpointermove:

•onpointermove是用于处理指针（如鼠标、触摸笔、触摸屏等）移动事件的事件处理程序属性。 •它适用于支持 Pointer Events 规范的浏览器，可以处理多种类型的指针设备。 •Pointer Events 提供了更统一的事件处理方式，使开发者能够编写一套代码来处理不同类型的指针设备。

2、 ontouchmove:

•ontouchmove是用于处理触摸屏设备上触摸移动事件的事件处理程序属性。 •它主要用于移动设备上的触摸屏，例如智能手机和平板电脑。 •Touch Events 是针对触摸屏设备的事件规范，提供了一系列事件来处理触摸操作，包括触摸开始、移动、结束等。

总的来说，onpointermove适用于更广泛的指针设备，而ontouchmove主要用于处理触摸屏设备上的触摸移动事件。在开发时，可以根据需求选择使用哪种事件处理程序属性来处理相应类型的事件。

尽管指针事件接口允许应用程序去为各种指针输入设备创建更佳的用户体验，但事实上，目前的大多数 web 内容仍然是仅为支持鼠标输入而设计的。因此，即使一个浏览器支持了指针事件，它也仍然需要在这些仅支持鼠标设置网页在不做任何修改的情况下继续对其提供支持。理想情况下，通用的指针模型将使得应用不再需要专门为鼠标输入设计相应。然而，因为浏览器仍必须处理鼠标事件，所以可能仍留存一些需要加以处理的兼容性问题。这一部分包含了一些对于开发者可能有用的关于鼠标事件和指针事件的异同点。