指针事件实验田 - 鼠标/笔/触摸统一模型
区分不同输入设备类型,查看各指针事件的属性差异,理解统一指针模型。
UD5工具箱
实时区分鼠标、触控笔与触摸输入 · Pointer Events API 可视化
| # | 时间 | 事件 | 类型 | X | Y | 压力 | 倾斜X | 倾斜Y | 宽度 |
|---|---|---|---|---|---|---|---|---|---|
| 暂无记录 | |||||||||
PointerEvent对象。开发者只需监听一组事件(pointerdown、pointermove、pointerup等),即可处理所有指针输入类型,无需分别处理mousedown和touchstart。通过event.pointerType属性可以区分具体输入设备类型('mouse'、'pen'、'touch')。
pointerType 有三种标准值:'mouse' — 鼠标输入,通常没有压力感应(pressure为0或0.5),支持悬停;'pen' — 触控笔/手写笔(如Apple Pencil、Wacom笔、Surface Pen),支持压力感应(pressure 0~1)、倾斜检测(tiltX/tiltY)、悬停等高级特性;'touch' — 手指触摸,不支持悬停,可能提供接触面积(width/height)和粗略压力值。pointerdown事件中,pointerType即被确定,后续的move和up事件会保持一致。
pressure 是一个0到1之间的浮点数,表示指针在数字化仪表面上的压力。对于触控笔,0表示笔尖轻触或悬停,1表示最大压力。不同设备压力范围不同(如Apple Pencil支持精细的压力等级)。对于鼠标,按下按钮时通常为0.5,未按下时为0。对于触摸,部分设备支持压力感应(如3D Touch),但多数设备返回0或0.5的离散值。开发者可利用pressure实现可变粗细的绘图、透明度变化等效果。
touch-action: none。这是因为浏览器默认会拦截触摸事件用于滚动、缩放等手势操作。如果不设置此属性,pointermove事件可能在几个事件后被浏览器取消(触发pointercancel),导致轨迹断裂。设置touch-action: none告知浏览器该元素自行处理所有指针事件,不执行默认手势。此外,在pointerdown中调用event.preventDefault()也能帮助防止意外行为。
navigator.maxTouchPoints — 返回设备支持的最大同时触摸点数,>0表示支持触摸;window.matchMedia('(pointer: fine)') — 检测是否有精确指针(鼠标或触控笔);window.matchMedia('(pointer: coarse)') — 检测是否有粗略指针(触摸);window.matchMedia('(hover: hover)') — 检测是否支持悬停(鼠标或高级触控笔);'ontouchstart' in window — 传统触摸检测方式。pointerType === 'pen'来实际检测。
pointermove事件,此时pressure为0,pointerType为'pen'。开发者可以通过检查pressure === 0且pointerType === 'pen'来判断笔处于悬停状态。这允许实现悬停预览、光标指示等高级交互。此功能需要设备硬件支持(电磁感应悬停检测)。
event.getCoalescedEvents()方法可以获取被合并的原始事件数组。这对于绘图应用非常重要——使用合并事件可以绘制出更平滑的线条,避免因事件合并导致的折线效果。每个合并事件都包含完整的位置和属性信息。
区分不同输入设备类型,查看各指针事件的属性差异,理解统一指针模型。
实时显示touchstart/move/end事件的所有属性:坐标、力度、半径与角度,辅助手势开发。
通过按下键位记录code和key值,推断当前键盘布局(如QWERTY、AZERTY)。
显示触摸事件的触摸点数量、每个点的坐标、触控半径和压力值,调试移动端。
选择光晕、拖尾、磁吸等风格,生成自制的JS鼠标光标特效代码。
实时显示滚动事件触发的频率与位移,帮助分析页面滚动性能与用户操作习惯。
在Canvas上移动鼠标绘制线条,并记录轨迹,支持回放绘画过程。
拖动指针或输入数字时间,显示相应的模拟钟面,辅助儿童学习认表。
在线响应式布局测试器,同时预览常见设备分辨率的网页显示效果,帮助检查前端适配。
粘贴自定义图标字体的Unicode,调节尺寸颜色立即查看效果。
输入文字描述或符号(如K, P),生成编织花样预览图,方便织女试读图解。
随机生成包含主角、场景与冲突的写作提示,拯救空白文档,激发创作欲。
记录页面交互触发的所有DOM事件及其目标、冒泡阶段,以日志和瀑布形式展示。
在图像上点击,利用前端模型将点击范围内的主要物体自动从背景分离。
添加知识点,按艾宾浩斯曲线自动生成未来几周的复习日期提醒。
展示多种子弹笔记的周计划、月计划、习惯追踪排版,供手帐爱好者参考。
测试navigator.clipboard读写功能,写入文本或读取系统剪贴板,验证安全限制。
解析标准Cron表达式,显示未来多次执行的具体日期时间,辅助验证定时任务配置。
输入一个数字串,在已计算的圆周率小数位中查找首次出现位置。
提供一份涵盖性能、安全、备份、监控等上线前检查清单,可自定义勾选。
上传 GIF 动画,提取每一帧并拼接为单张精灵表图片,可设置排列方式,用于游戏开发。
创建闪卡并根据掌握程度放入5个盒子,按照不同间隔自动提供今日复习卡组。
搜索知名品牌名称,显示其标志性的官方HEX颜色代码。
随机组合种族、职业、性格、秘密和过往事件,创造丰富的虚构角色背景。
上传照片,通过边缘检测和纹理叠加转换为逼真的铅笔素描风格图片,可调节线条密度。
提供深刻问题如“真正让你快乐的事是什么”,激发深度日记写作。
设置浏览器标题和图标,模拟在暗色/亮色主题下标签栏的样子。
编写O与对应KR,可视化进度条与完成度,团队或个人目标跟踪的轻量替代。
可拖拽、可更换颜色的在线便签工具,数据存储在LocalStorage,帮助快速记录临时想法。
显示一个调性和罗马数字和弦级数,选择该和弦的正确根音和音名组成。