如何在JavaScript中遍历触摸事件TouchList的所有触摸属性？

原代码不显示内容的原因 #

你原来的代码直接将Touch对象传入createTextNode，最终只会输出[object Touch]字符串；如果连这个都看不到，大概率是没在触摸设备/触摸模拟环境下测试——可以在Chrome开发者工具的设备工具栏里开启触摸模拟功能。另外，evt.preventDefault()会阻止触摸事件的默认行为（比如页面滚动），但不影响事件本身的触发。

遍历TouchList的正确方式 #

TouchList是一个类数组对象，不是普通数组，但可以通过以下几种方式遍历：

1. 普通for循环（你原来的写法逻辑没问题，只是内容处理不对）
2. 用Array.from()转换为数组后使用forEach
3. 使用for...of循环（ES6+支持）

示例代码：

// 方式1：普通for循环
for (let i = 0; i < evt.touches.length; i++) {
  const touch = evt.touches[i];
  // 处理触摸点逻辑
}

// 方式2：Array.from + forEach
Array.from(evt.touches).forEach(touch => {
  // 处理触摸点逻辑
});

// 方式3：for...of循环
for (const touch of evt.touches) {
  // 处理触摸点逻辑
}

查看Touch对象的所有属性 #

你用Object.entries()无效，是因为Touch对象的大部分属性是不可枚举的，Object.entries()只能返回对象的可枚举属性。要获取所有属性（包括不可枚举的），可以用以下方法：

1. 在控制台打印详情：直接在事件回调里写console.dir(touch)，在浏览器控制台里可以展开查看所有属性和方法。
2. 用Object.getOwnPropertyNames()获取属性名：该方法会返回对象自身的所有属性名（无论是否可枚举），然后你可以逐个访问属性值。

示例代码（显示所有触摸点属性）：

const TOUCHME = document.getElementById('TOUCHME');
const OUTPUT = document.getElementById('OUTPUT');

TOUCHME.addEventListener('touchstart', (evt) => {
  evt.preventDefault();
  OUTPUT.innerHTML = ''; // 清空之前的输出
  
  for (const touch of evt.touches) {
    const touchDiv = document.createElement('div');
    touchDiv.innerHTML = `<h4>触摸点 ID: ${touch.identifier}</h4>`;
    
    // 获取所有属性名
    const props = Object.getOwnPropertyNames(touch);
    props.forEach(prop => {
      touchDiv.innerHTML += `<p>${prop}: ${touch[prop]}</p>`;
    });
    
    OUTPUT.appendChild(touchDiv);
    OUTPUT.appendChild(document.createElement('hr'));
  }
});

额外提示 #

• touch.identifier是每个触摸点的唯一标识，可用于追踪多点触摸中单个手指的移动。
• 常用的触摸属性包括pageX/pageY（相对于文档的坐标）、clientX/clientY（相对于视口的坐标）、target（触摸的目标元素）等。

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