编辑“︁HTML触摸事件”︁

{{DISPLAYTITLE:HTML触摸事件}}

'''HTML触摸事件'''是专为触摸屏设备设计的一组JavaScript事件，允许开发者响应用户的手指或触控笔交互。随着移动设备的普及，触摸事件成为现代Web开发的关键组成部分，用于构建直观的触控界面。

== 概述 ==
触摸事件与传统的鼠标事件（如<code>click</code>或<code>mousemove</code>）不同，它们能同时处理多点触控输入，并提供更精细的触控数据（如压力、触点坐标等）。主要应用场景包括：
* 手势识别（缩放、旋转、滑动）
* 绘图应用
* 游戏控制
* 自定义触摸反馈

== 核心事件类型 ==
HTML5定义了以下基础触摸事件：

{| class="wikitable"
! 事件名称 !! 触发条件
|-
| <code>touchstart</code> || 手指接触屏幕时
|-
| <code>touchmove</code> || 手指在屏幕上移动时
|-
| <code>touchend</code> || 手指离开屏幕时
|-
| <code>touchcancel</code> || 系统中断触摸时（如来电）
|}

=== 事件对象属性 ===
触摸事件对象包含以下关键属性：
* <code>touches</code>：当前屏幕上所有触点的列表
* <code>targetTouches</code>：绑定到当前元素的触点
* <code>changedTouches</code>：引发当前事件的触点

每个触点（<code>Touch</code>对象）包含：
* <code>identifier</code>：唯一ID
* <code>clientX/clientY</code>：相对于视口的坐标
* <code>pageX/pageY</code>：相对于文档的坐标

== 基础代码示例 ==
以下示例演示如何检测单点触摸：

<syntaxhighlight lang="javascript">
const element = document.getElementById('touchArea');

element.addEventListener('touchstart', (event) => {
    // 阻止默认行为（如滚动）
    event.preventDefault();
    
    // 获取第一个触点
    const touch = event.touches[0];
    console.log(`触摸开始于 (${touch.clientX}, ${touch.clientY})`);
});

element.addEventListener('touchmove', (event) => {
    const touch = event.touches[0];
    console.log(`移动至 (${touch.clientX}, ${touch.clientY})`);
});

element.addEventListener('touchend', () => {
    console.log('触摸结束');
});
</syntaxhighlight>

== 多点触控实现 ==
通过跟踪<code>Touch.identifier</code>可区分不同触点：

<syntaxhighlight lang="javascript">
element.addEventListener('touchstart', (event) => {
    Array.from(event.touches).forEach(touch => {
        console.log(`触点 ${touch.identifier}: (${touch.clientX}, ${touch.clientY})`);
    });
});
</syntaxhighlight>

== 手势识别案例 ==
以下实现简单的双指缩放检测：

<syntaxhighlight lang="javascript">
let initialDistance = null;

element.addEventListener('touchstart', (event) => {
    if (event.touches.length === 2) {
        const dx = event.touches[1].clientX - event.touches[0].clientX;
        const dy = event.touches[1].clientY - event.touches[0].clientY;
        initialDistance = Math.sqrt(dx*dx + dy*dy);
    }
});

element.addEventListener('touchmove', (event) => {
    if (event.touches.length === 2 && initialDistance) {
        const dx = event.touches[1].clientX - event.touches[0].clientX;
        const dy = event.touches[1].clientY - event.touches[0].clientY;
        const currentDistance = Math.sqrt(dx*dx + dy*dy);
        
        const scale = currentDistance / initialDistance;
        console.log(`缩放比例: ${scale.toFixed(2)}`);
    }
});
</syntaxhighlight>

== 性能优化 ==
触摸事件可能高频触发（如<code>touchmove</code>），需注意：
* 使用<code>requestAnimationFrame</code>节流处理
* 避免在事件处理中进行复杂DOM操作
* 必要时使用CSS的<code>touch-action</code>属性控制浏览器默认行为

== 兼容性处理 ==
虽然现代浏览器普遍支持触摸事件，但建议：
* 同时监听鼠标事件作为后备
* 使用特征检测：
<syntaxhighlight lang="javascript">
if ('ontouchstart' in window) {
    // 触摸设备支持
}
</syntaxhighlight>

== 可视化分析 ==
以下mermaid图展示触摸事件流程：

<mermaid>
sequenceDiagram
    participant 用户
    participant 浏览器
    participant JavaScript

    用户->>浏览器: 手指接触屏幕
    浏览器->>JavaScript: 触发touchstart
    JavaScript-->>浏览器: 阻止默认滚动
    用户->>浏览器: 移动手指
    浏览器->>JavaScript: 连续触发touchmove
    用户->>浏览器: 抬起手指
    浏览器->>JavaScript: 触发touchend
</mermaid>

== 数学原理 ==
计算旋转角度时需使用向量公式：
<math>
\theta = \arctan\left(\frac{y_2 - y_1}{x_2 - x_1}\right)
</math>

== 进阶主题 ==
* 与Pointer Events API的对比
* 触摸事件与CSS滚动捕捉的结合
* 使用Touch Events API实现绘图板

[[Category:HTML高级特性]]
[[Category:Web API]]
[[Category:移动端开发]]

[[Category:编程语言]]
[[Category:HTML]]