学会Pointer指针事件，一套拖拽事件两端(PC端、移动端)跑

news2024/12/28 18:35:34

早期浏览器很low，它只存在鼠标事件(MouseEvent)。随时代的发展出现了智能手机、平板电脑等触屏设备，交互方式发生了变化，单纯的鼠标事件已不够开发人员使用了。于是引入了触摸事件(TouchEvent)。不过这还不够完美，没有把触控笔事件考虑进去。当要求移动端、PC端同时具备拖拽功能时，开发人员还要维护两份事件逻辑。

为了解决上述问题，官方引入了全新的规范Pointer指针事件(Pointer) ，它提供了一套统一的事件，鼠标、触摸、触控笔事件一锅端了，不需要再维护两套事件逻辑。

Pointer指针事件属性

Pointer继承MouseEvent事件，因此常用属性clientX，clientY等指针事件都具备，同时指针事件也扩展了它自己独有的属性。

属性	介绍
pointerId	指针引起的事件的唯一标识
width	指针的接触面的CSS像素宽度
height	指针的接触面的CSS像素高度
pressure	指针输入的压力值，范围在0-1之间
tangentialPressure	切向压力值，范围在-1-1]之间，0表示控制设备中立状态时的值
tiltX	由输入设备（如手写笔）与Y轴的构成平面，和YZ平面之间的夹角，范围在-90-90之间
tiltY	由输入设备（如手写笔）与X轴构成平面，和XZ平面之间的夹角，范围在-90-90之间
twist	输入设备（如手写笔）围绕自身范围旋转的角度，范围在0-359之间
pointerType	表示触发事件的设备类型，mouse，pen，touch
isPrimary	表示一个指针是否是当前设备类型的主指针

以上属性使用场景我没想到，有大佬的话可以指点下。

Pointer事件类型

Pointer有不同的事件类型，与鼠标事件一样有相同的语义话表示(down, up, move, over, out, enter, leave)。

事件类型	事件介绍
`pointerover`	当定点设备进入某个元素的命中检测范围时触发。
`pointerenter`	当定点设备进入某个元素或其子元素的命中检测范围时，或做为某一类不支悬停（hover）状态的设备所触发的poinerdown事件的后续事件时所触发。(详情可见 pointerdown事件类型).
`pointerdown`	当某指针得以激活时触发。
`pointermove`	当某指针改变其坐标时触发。
`pointerup`	当某指针不再活跃时触发。
`pointercancel`	当浏览器认为某指针不会再生成新的后续事件时触发（例如某设备不再活跃）
`pointerout`	可能由若干原因触发该事件，包括：定位设备移出了某命中检测的边界；不支持悬浮状态的设备发生pointerup事件（见pointerup事件）；作为 pointercancel event事件的后续事件（见pointercancel事件）；当数位板检测到数位笔离开了悬浮区域时。
`pointerleave`	当定点设备移出某元素的命中检测边界时触发。对于笔形设备来说，当数位板检测到笔移出了悬浮范围时触发。
`gotpointercapture`	当某元素接受到一个指针捕捉时触发。
`lostpointercapture`	当针对某个指针的指针捕捉得到释放时触发。

指针、鼠标及触摸事件对比：

MouseEvent	TouchEvent	PointerEvent
mousedown	touchstart	pointerdown
mousemove	touchmove	pointermove
mouseup	touchend	pointerup
	touchcancel	pointercancel
mouseenter		pointerenter
mouseleave		pointerleave
mouseover		pointerover
mouseout		pointerout
		gotpointercapture
		lostpointercapture

Pointer事件的使用

先看看鼠标实现拖拽效果：

<div id="app"></div>
<script>
    const app = document.getElementById('app')
    let isPointerDown = false

    app.addEventListener('mousedown', function (e) {
        isPointerDown = true
    });

    document.addEventListener('mousemove', function (e) {
        if (isPointerDown) {
            const left = app.getBoundingClientRect().left
            const top = app.getBoundingClientRect().top
            let newLeft = e.clientX - left
            let newTop = e.clientY - top
            console.log(newLeft, newTop);
            app.style.left = newLeft + left - app.clientWidth / 2 + 'px'
            app.style.top = newTop + top - app.clientHeight / 2 + 'px'
        }
    });

    document.addEventListener('mouseup', function (e) {
        isPointerDown = false
    });
</script>

电脑、移动设备分别访问链接，出现的效果是电脑可以拖拽，移动设备不支持。如果想要移动设备满足拖拽要单独使用触摸事件再写一套。

可以点击这里体验：https://code.juejin.cn/pen/7250291342034042940

用Pointer事件实现拖拽：

<div id="app"></div>
<script>
  const app = document.getElementById('app')
  let isPointerDown = false

  app.addEventListener('pointerdown', function (e) {
      isPointerDown = true
  });

  app.addEventListener('pointermove', function (e) {
      //捕获
      app.setPointerCapture(e.pointerId)
      if (isPointerDown) {
          const left = app.getBoundingClientRect().left
          const top = app.getBoundingClientRect().top
          let newLeft = e.clientX - left
          let newTop = e.clientY - top
          app.style.left = newLeft + left - app.clientWidth / 2 + 'px'
          app.style.top = newTop + top - app.clientHeight / 2 + 'px'
      }
  });

  app.addEventListener('pointerup', function (e) {
      isPointerDown = false
  });
</script>