无需登录 数据私有 本地保存

触摸事件探查器 - 多点触控详细数据记录

12
0
0
0

触摸事件探查器

实时多点触控数据记录与分析
等待触摸 活跃: 0 峰值: 0 事件: 0
在此触摸或点击拖动
活跃触摸点
0个触摸点
在左侧区域触摸以查看数据
事件日志
最近 80 条
# 类型 ID X Y 力度 时间
等待触摸事件...
常见问题与知识点

触摸事件是浏览器为触屏设备提供的一套原生API，允许开发者捕获手指或触控笔在触摸屏上的交互。主要包括四种事件类型：touchstart（手指接触屏幕）、touchmove（手指在屏幕上滑动）、touchend（手指离开屏幕）和touchcancel（触摸被系统中断，如来电）。每个触摸事件都包含一个TouchList，其中每个Touch对象代表一个独立的触摸点，包含坐标、压力、接触面积等详细数据。

关键区别在于：①多点支持：触摸事件可同时追踪多个触摸点（多点触控），而鼠标事件始终只有一个光标；②数据丰富度：触摸事件提供force（压力）、radiusX/Y（接触椭圆半径）、rotationAngle（椭圆旋转角）等物理数据，鼠标事件没有这些；③事件触发：触摸设备上通常会先触发触摸事件，约300ms后才触发模拟的鼠标事件（click等）；④无悬停：触摸屏没有hover概念，而鼠标有mouseover/mouseout。现代开发建议同时处理两种事件以兼容所有设备。

force是一个0到1之间的浮点数，表示手指按压屏幕的力度。0表示轻微接触（但仍在屏幕上），1表示最大压力。该属性在iOS Safari中支持良好（尤其是支持3D Touch的iPhone），但在大多数Android设备上通常只返回0或1的离散值。对于支持压感的触控笔（如Apple Pencil、Samsung S Pen），force值更为精确和连续。如果设备不支持压力检测，force值始终为0（touchstart时）或1（touchmove/touchend时）。

这三个属性描述手指与屏幕接触区域的椭圆近似：radiusX是椭圆在X轴方向的半径（像素），radiusY是Y轴方向的半径，rotationAngle是椭圆绕中心旋转的角度（弧度，0~π）。手指竖着按时radiusY较大、radiusX较小，rotationAngle约为0；横着按时则相反。这些数据在Chrome/Edge（Android）上支持良好，iOS Safari也部分支持。对于精确的绘图应用或手势识别非常有用。如果设备不支持，这些值通常默认为1或较小的固定值。

当两个触摸点同时活跃时，可以通过以下方式计算缩放和旋转：①缩放比例 = 当前两指距离 ÷ 初始两指距离（使用勾股定理计算两点间欧几里得距离）；②旋转角度 = 当前两指连线角度 - 初始连线角度（使用atan2计算）。这个工具在几何信息栏会实时显示两指之间的距离和中点坐标。对于更多手指（3指以上），可以计算包围多边形的面积变化来判断整体缩放手势。

在支持的设备上（iPad + Apple Pencil、部分Android平板），Touch对象额外提供：touchType（值为'stylus'表示触控笔，'direct'表示手指）；altitudeAngle（笔与屏幕平面的夹角，0=平放，π/2≈1.57=垂直）；azimuthAngle（笔在屏幕平面上的方向角，0~2π，表示笔尖指向的方向）。这些数据对于专业绘图应用至关重要，可以实现倾斜阴影、笔刷方向等高级功能。目前主要在Safari（iOS/iPadOS）中支持较好。

触摸数据的可用性因浏览器、操作系统和硬件而异：iOS Safari提供最完整的force数据；Chrome/Edge在Android上提供较好的radiusX/Y数据；Firefox对部分属性的支持有限；桌面浏览器（即使带触摸屏）通常只提供基础坐标数据。此外，贴了厚钢化膜可能影响force检测，手指干燥时radius数据可能偏小。使用此工具在目标设备上实际测试是了解数据可用性的最佳方式。

步骤：①在触摸设备上打开此页面；②在触摸区域进行单指或多指操作；③观察实时数据面板中每个触摸点的坐标、力度、接触面积变化；④查看事件日志了解事件触发顺序和频率；⑤使用"导出JSON"保存完整数据供离线分析；⑥在几何信息栏查看多指距离关系。常见用途包括：验证触摸事件是否按预期触发、检查多点触控的坐标准确性、分析触摸采样率、对比不同设备的触摸数据差异、调试手势识别逻辑等。
🔧 相关工具