🧑🎓 个人主页：《爱蹦跶的大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 => {// 记住首次触摸的pointerIdpointerId = event.pointerId;
};// 后续事件只处理匹配的指针
elem.onpointermove = event => {if(event.pointerId === pointerId) {// 处理移动}
};
这样可以隔离单个指针的行为,必要时对每个指针分别处理。
指针捕获
默认指针事件同样遵循冒泡传播机制。可以通过 elem.setPointerCapture(pointerId) 进行指针捕获,使得对应指针移动时始终触发 elem 的事件,即使已位于其外。
// 开始移动时捕获指针
elem.onpointerdown = function(event) {if (event.isPrimary) {elem.setPointerCapture(event.pointerId);}
};✨ 结语
指针事件大大简化了不同指针输入的事件处理。它提供了强大的属性和方法,如指针类型识别、指针跟踪及捕获等。
本文详细介绍了指针事件的特性及用法。相信通过学习,大家现在已可以使用统一的指针事件接口处理鼠标和触摸事件,开发出色的跨设备用户体验。如果还有疑问,欢迎评论区交流。
