JavaScript中mouse、touch与pointer事件的关联及相关技术问题咨询

1. 同一用户交互触发的事件执行顺序 #

分两种场景：

• 触摸交互（触屏操作）：触发顺序为 touchstart → pointerdown → touchend → pointerup → pointerout → mouseover → mousemove → mousedown → mouseup → click。浏览器会自动生成模拟的mouse事件，除非在touchstart、touchmove或pointerdown事件中调用event.preventDefault()阻止默认行为。
• 鼠标交互：触发顺序为 pointerdown → mousedown → pointerup → mouseup → click，不会触发任何touch事件。

2. 判断Pointer与Mouse事件是否源自同一交互 #

有几种可靠的方法：

• 利用pointerId：鼠标对应的pointerId固定为1，触摸/笔的pointerId是动态分配的。如果是触摸触发的模拟mouse事件，可在pointerdown时记录当前pointerId，后续mouse事件触发时结合时间戳判断是否属于同一交互周期。
• 时间戳对比：同一交互触发的事件，event.timeStamp数值误差在几毫秒内，可通过这个范围判断是否同源。
• 自定义标记：在pointerdown事件中，给目标元素添加临时属性（比如data-last-pointer-id），记录当前pointerId和时间戳；在mouse事件触发时读取该属性对比，确认后移除标记。
• event.isTrusted：确保事件是用户交互触发的，而非脚本生成的，排除模拟事件干扰。

3. 事件冒泡方式 #

同一用户交互触发的各类事件是按顺序依次冒泡的，而非交错冒泡。即某一类事件（比如touchstart）会先完成从目标元素到根节点的整个冒泡流程，之后才会触发下一类事件（比如pointerdown）的冒泡。例如：touchstart从目标元素冒泡到document，之后pointerdown再从目标元素开始冒泡到document，以此类推。

内容的提问来源于stack exchange，提问作者Harald