晚期浏览器很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当针对某个指针的指针捕获失去开释时触发。

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

MouseEventTouchEventPointerEvent
mousedowntouchstartpointerdown
mousemovetouchmovepointermove
mouseuptouchendpointerup
touchcancelpointercancel
mouseenterpointerenter
mouseleavepointerleave
mouseoverpointerover
mouseoutpointerout
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>

Pointer事件与鼠标事件应用存在差别，Pointer应用setPointerCapture API做为捕捉。

应用Pointer事件后电脑、挪动设施都能进行拖拽。

能够点击这里体验: https://code.juejin.cn/pen/7250289016656887847

挪动设施拖拽效果图：

总结

Pointer指针事件帮忙咱们通过一份代码，同时解决鼠标，触摸和触控笔事件，能为开发者节俭掉工夫。防止保护多套事件逻辑，做到一套事件逻辑两端跑。

如果我的文章对你有帮忙，您的就是对我的最大反对^_^。

往期文章：http://linglan01.cn/about