JavaScript指针事件

‍ 个人主页：《爱蹦跶的大A阿》

当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        随着移动设备的普及,触屏交互正在快速增长。指针事件提供了支持触控和鼠标的统一接口,学习它对我们开发跨设备网页非常重要。

        本文将详细介绍指针事件的种类、属性方法,以及如何区分不同指针等知识。希望通过这个博客,大家可以自由使用指针事件来开发跨平台应用程序。现在就让我们开始学习之旅!

​

✨ 正文

指针事件(Pointer Events)是一组鼠标、触控和触控笔事件的统一接口。

事件列表

主要指针事件:

• pointerdown – 当指针按下时触发。
• pointerup – 当指针松开时触发。
• pointermove – 当指针移动时重复触发。
• pointerover – 当指针移到元素上时触发。
• pointerout – 当指针移出元素时触发。
• pointerenter – 当指针穿过元素边界进入时触发。
• pointerleave – 当指针穿过元素边界离开时触发。

  elem.onpointerdown = event => {
    // 指针按下
  };
  
  elem.onpointermove = event => { 
    // 指针移动
    let x = event.clientX;
    let y = event.clientY;
  };

指针类型

事件属性可以识别指针设备:

• event.pointerType – 设备类型,例如鼠标、触控笔等。
• event.isPrimary – 是否为主指针(通常是鼠标或第一根手指)。

跨设备兼容性

指针事件提供鼠标和触摸屏支持,但部分老旧设备可能不支持。这时作为后备方案可以同时绑定 touch 事件。

指针标识

跟踪同一指针的多次触发,可以使用指针标识(pointerId)属性:

let pointerId = -1;

elem.onpointerdown = event => {
  // 记住首次触摸的pointerId
  pointerId = event.pointerId; 
};

// 后续事件只处理匹配的指针  
elem.onpointermove = event => {
  if(event.pointerId === pointerId) {
    // 处理移动
  }  
};

 

这样可以隔离单个指针的行为,必要时对每个指针分别处理。

指针捕获

默认指针事件同样遵循冒泡传播机制。可以通过 elem.setPointerCapture(pointerId) 进行指针捕获,使得对应指针移动时始终触发 elem 的事件,即使已位于其外。

// 开始移动时捕获指针  
elem.onpointerdown = function(event) {
  if (event.isPrimary) {
    elem.setPointerCapture(event.pointerId);
  }
};

✨ 结语

        指针事件大大简化了不同指针输入的事件处理。它提供了强大的属性和方法,如指针类型识别、指针跟踪及捕获等。

        本文详细介绍了指针事件的特性及用法。相信通过学习,大家现在已可以使用统一的指针事件接口处理鼠标和触摸事件,开发出色的跨设备用户体验。如果还有疑问,欢迎评论区交流。

​