指针事件无 javascript

在前端开发中，常常需要监听用户的交互行为，比如点击、滚动、拖拽等等。而JavaScript中提供了针对这些事件的监听方法，例如click、scroll、drag等等。

那么如果没有JavaScript，我们该如何监听这些事件呢？答案是使用HTML中的指针事件（Pointer Event）。

指针事件是一种针对移动设备、电脑和其他输入设备的统一事件，包括鼠标、触摸屏幕、触控笔等等。使用指针事件，我们可以监听用户的交互行为，并在事件发生时执行相应的操作。

基本用法

指针事件有四种类型，分别是：

• pointerdown：指针按下时触发，类似于click事件
• pointermove：指针移动时触发，类似于mousemove事件
• pointerup：指针松开时触发，类似于mouseup事件
• pointercancel：指针取消时触发，例如在触摸屏幕上滑动时来电，会触发pointercancel事件

我们可以在HTML标签上添加事件监听器，例如：

<div
  onpointerdown="handlePointerDown(event)"
  onpointermove="handlePointerMove(event)"
  onpointerup="handlePointerUp(event)"
  onpointercancel="handlePointerCancel(event)"
>
  <!-- content -->
</div>

在事件处理函数中可以通过event获取事件对象，从而获取事件的类型、坐标、按下状态等等信息：

function handlePointerDown(event) {
  console.log("Pointer down at", event.clientX, event.clientY);
}

function handlePointerMove(event) {
  console.log("Pointer move at", event.clientX, event.clientY);
}

function handlePointerUp(event) {
  console.log("Pointer up at", event.clientX, event.clientY);
}

function handlePointerCancel(event) {
  console.log("Pointer cancel at", event.clientX, event.clientY);
}

兼容性

指针事件是HTML5引入的新特性，在不同的浏览器中兼容性可能存在差异。

目前，大部分主流浏览器（包括Chrome、Firefox、Safari、Edge等等）都已经支持指针事件。但是，部分老旧的浏览器可能不支持或支持不完整，需要添加兼容性代码。可以使用一些polyfill库来实现兼容性，例如PEP（Pointer Events Polyfill）。

总结

指针事件是一个强大的HTML特性，在不依赖JavaScript的情况下，可以监听用户的交互行为，为Web应用的开发提供了更多可能性。但是，需要注意的是指针事件在不同浏览器上的兼容性有差异，需要进行兼容处理。