Pointer Event

https://zh.javascript.info/pointer-events

https://www.yuque.com/qinsjs/jsinfo/kpaoie

https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events

操作区域

Pointer Events 是更为现代的标准。它融合了 鼠标事件 与 触摸事件。

<div
  class="events"
  @pointerdown.prevent="down"
  @pointerup="up"
  @pointermove="move"
  @pointerover="over"
  @pointerout="out"
  @pointerenter="enter"
  @pointerleave="leave"
  @pointercancel="cancel"
  @gotpointercapture="emmm"
  @lostpointercapture="emmm"
></div>

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#event_types_and_global_event_handlers

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

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

属性

pointerId —— 指针的唯一标识符。浏览器生成的。用于处理多指针的情况。
pointerId 不是分配给整个设备的，而是分配给每一个触摸的。

pointerType —— string。指针的设备类型。“mouse”、“pen” 或 “touch”。

isPrimary —— 当指针为首要指针时为 true。（如：多点触控时按下的第一根手指）

接触面积和点按压力相关:

• width —— 接触设备的区域的宽度。（对于不支持的设备，这个值总是 1。
• height —— 接触设备的区域的长度。（对于不支持的设备，这个值总是 1。
• pressure —— 触摸压力，是一个介于 0 到 1 之间的浮点数。（对于不支的设备，这个值总是 0.5（按下时）或 0。
• tangentialPressure —— 归一化后的切向压力（tangential pressure）。
• tiltX, tiltY, twist —— 针对触摸笔的几个属性，用于描述笔和屏幕表面的相对位置。

w3c 规范文档

多点触控

第一个手指触摸 isPrimary 是 true ，其他都是 false。

5 根手指，会有 5 个 pointerdown , 5 个 pointerId 。

pointer cancel

活跃的 pointer 中断，如：屏幕旋转、浏览器默认事件

最简单的例子，拖动图片。浏览器对于 img 有自己的默认处理，此时就会触发 pointercancel

解决方式：

1. 鼠标拖放事件 ：img.ondragstart = () => false
2. 对于触屏设备：：img { touch-action: none }

Pointer capturing

指针捕获（Pointer capturing）是针对指针事件的一个特性。

其他任何事件类型中都没有这种东西。

element.setPointerCapture(pointerId);

将给定的 pointerId 绑定到 element。之后调用，所有具有相同 pointerId 的指针事件都将 lement 作为目标。

就像事件发生在 element 上一样，无论这些 element 在文档中的实际位置是什么。

代码如下。

<template>
  <div class="slider" ref="slider">
    <div
      class="thumb"
      ref="thumb"
      @pointerdown.prevent="down"
      @pointerup="up"
      @pointermove="move"
      @pointercancel="cancel"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const thumb = ref(null);
const slider = ref(null);

let isDown = false;
const down = (event) => {
  if (thumb) thumb.value.setPointerCapture(event.pointerId);
  isDown = true;
};
const up = () => {
  // 无需调用 thumb.releasePointerCapture，它会在 pointerup 时被自动调用
  isDown = false;
};
const cancel = up;

const move = (event) => {
  if (!isDown || !thumb || !slider) return;

  let newLeft = event.clientX - slider.value.getBoundingClientRect().left;

  thumb.value.style.left = newLeft + "px";
};
</script>

当 pointerup 或 pointercancel 事件出现时，绑定会被自动地移除。

todo jsinfo 的 这部分 可以好好看一看