如何遍历 JavaScript 中 TouchList 的所有触摸点及其属性-html教程-PHP中文网

本文详解如何正确遍历 TouchEvent.touches（TouchList）并访问每个 Touch 对象的全部属性，解决因直接 toString() 或错误使用 Object.entries() 导致内容不显示的问题，并提供可运行示例与调试要点。

本文详解如何正确遍历 `touchevent.touches`（touchlist）并访问每个 `touch` 对象的全部属性，解决因直接 `tostring()` 或错误使用 `object.entries()` 导致内容不显示的问题，并提供可运行示例与调试要点。

在处理移动端触控交互时，TouchEvent.touches 是一个只读的 TouchList 对象，它并非标准数组（Array），而是一个类似类数组（array-like）的集合，不支持 for...of、扩展运算符（...）、map() 或 Object.entries() 等数组/对象方法。这也是你尝试 Object.entries(evt.touches) 返回空结果、touches[i] 直接 .toString() 显示 "undefined" 或 [object Touch] 却无实际内容的根本原因——Touch 对象默认转字符串不输出其属性，且 TouchList 不具备可枚举的自有属性。

✅ 正确做法是：

通过 .length 获取触点数量；
使用整数索引 touches[i] 或 .item(i) 方法获取单个 Touch 对象（二者等价）；
显式访问 Touch 接口定义的属性，如 identifier、clientX、clientY、pageX、pageY、screenX、screenY、target 等。

以下是完整、可运行的示例代码（已修复原始问题）：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

<div id="TOUCHME"> TOUCH ME </div>
<div id="OUTPUT"></div>
<script>
const TOUCHME = document.getElementById('TOUCHME');
const OUTPUT = document.getElementById('OUTPUT');

TOUCHME.addEventListener('touchstart', (evt) => {
  evt.preventDefault(); // 阻止默认行为（如滚动），确保事件触发

  const touches = evt.touches;
  OUTPUT.innerHTML = ''; // 清空上次输出，便于观察

  for (let i = 0; i < touches.length; i++) {
    const touch = touches[i]; // 或 touches.item(i)

    // 创建结构化输出块
    const infoDiv = document.createElement('div');
    infoDiv.innerHTML = `
      <strong>Touch ${i + 1} (ID: ${touch.identifier}):<br>
        clientX: ${touch.clientX}, clientY: ${touch.clientY}<br>
        pageX: ${touch.pageX}, pageY: ${touch.pageY}<br>
        screenX: ${touch.screenX}, screenY: ${touch.screenY}<br>
        target: ${touch.target.tagName || 'unknown'}
    `;
    OUTPUT.appendChild(infoDiv);
  }
});
</script>

? 关键注意事项：

设备与调试环境限制：桌面浏览器默认不触发 touchstart。务必在真机或启用「触控模拟」的响应式开发工具中测试（Chrome DevTools → 切换设备工具栏 → 启用 "Emulate touch events"；Firefox → 响应式设计模式 → 点击齿轮图标 → 勾选 "Enable touch events"）。
不要依赖 toString()：touches[i].toString() 返回 [object Touch]，无法获取属性值；必须显式访问字段。
TouchList 不是 Array：它没有 forEach、filter 等方法。若需函数式操作，可先转为数组：Array.from(touches)（ES2015+ 支持），之后再遍历：
```
Array.from(evt.touches).forEach((touch, idx) => {
  console.log(`Touch ${idx}:`, { identifier: touch.identifier, pageX: touch.pageX });
});
```
属性兼容性：identifier、clientX/Y、pageX/Y 在所有主流移动浏览器中稳定支持；radiusX/Y、rotationAngle、force 属于高级属性，需按需检测是否存在。

? 总结：遍历 TouchList 的本质是「按索引提取 Touch 实例 + 显式读取标准属性」。理解 TouchList 的接口规范（见 MDN Touch API）比盲目迭代更高效可靠。开发中建议优先使用 Array.from(touches) 转换为真实数组，兼顾可读性与现代语法支持。