浅谈javascript的Touch事件

深入iOS和Android设备的触摸事件API：构建可触控应用的技术与最佳实践

触摸事件在移动设备应用中扮演着至关重要的角色，特别是在iOS和Android设备上。js的触摸事件为开发者提供了一种高效的方式来处理用户的触摸交互。

当用户在移动设备上触摸屏幕时，会触发一系列的事件，包括touchstart、touchmove、touchend以及touchcancel。这些事件为开发者提供了丰富的信息，如触摸的位置、触摸的手指数量等。

一、触摸事件简述

1. touchstart：当手指触摸屏幕时触发。

2. touchmove：手指在屏幕上滑动时连续触发。

3. touchend：手指从屏幕上移开时触发。

4. touchcancel：当系统停止跟踪触摸时触发，其确切触发条件文档中并未明确说明。

每个触摸事件都包含了一些重要的属性，如：

touches：当前跟踪的触摸操作的Touch对象的数组。

targetTouches：特定于事件目标的Touch对象的数组。

changedTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含了许多有用的属性，如clientX、clientY、identifier、pageX、pageY、screenX和screenY等，这些属性可以帮助开发者了解触摸的详细信息。

二、可触控应用

触摸事件为构建各种类型的移动应用提供了可能，包括基于触摸的交互、多点触摸手势（如捏缩放、旋转等）。以下是一个简单的例子，展示了如何使用touchstart、touchmove和touchend事件来拖曳一个DOM元素：

```javascript

var obj = document.getElementById('id'); // 获取需要拖动的元素

obj.addEventListener('touchmove', function(event) {

// 如果这个元素的位置内只有一个手指的话

if (event.targetTouches.length == 1) {

var touch = event.targetTouches[0];

// 把元素放在手指所在的位置

obj.style.left = touch.pageX + 'px';

obj.style.top = touch.pageY + 'px';

}

}, false);

```

还有更多的技术和工具可以帮助开发者更容易地创建可触控应用，如Hammer.js等库，它们提供了更丰富、更易于使用的触摸事件处理功能。

三、最佳实践和技术

1. 使用触摸事件时，要注意性能和响应速度的问题，避免过多的触摸事件导致页面卡顿。

2. 对于复杂的触摸交互，可以考虑使用专门的库或框架来简化开发过程。

3. 在处理多点触摸手势时，要确保各种手势的逻辑清晰，避免冲突。

4. 对于需要精确控制元素位置的应用，可以使用requestAnimationFrame来优化动画效果。

5. 在跨设备、跨浏览器的情况下，要注意不同设备和浏览器的兼容性问题。

演示

移动设备的多点触摸功能为我们带来了许多有趣的互动体验。Paul Irish和其他人实现的一个基于画布的绘画演示就是其中之一。通过简单的触摸动作，我们可以在画布上绘制出精美的图案。

除此之外，还有一个技术演示叫Browser Ninja，它是一个使用CSS3转换、过渡和画布的Fruit Ninja克隆。这个演示展示了移动设备的多点触摸技术在游戏开发中的应用。

最佳实践

在开发多点触摸应用时，我们需要考虑一些最佳实践来提高用户体验。我们需要阻止缩放功能。默认情况下，多点触摸的行为可能与浏览器的滚动和缩放功能关联，这可能会导致用户的滑动和手势无法按照预期工作。为了解决这个问题，我们可以通过设置viewport的元标记来禁用缩放功能。我们还可以阻止滚动行为，以消除一些移动设备上的缺省滚动效果，如iOS的overscroll效果。

当我们处理复杂的多指手势时，需要小心考虑如何响应触摸事件。一种常见的方法是跟踪所有的手指，然后在循环中进行渲染，以获得更好的性能。我们还可以使用requestAnimationFrame函数来处理动画，这是一个现代浏览器提供的更高效的函数，可以基于性能和电池寿命进行优化。

在开发过程中，我们还需要注意使用event.targetTouches和event.changedTouches这两个属性。这些属性提供了与屏幕接触的所有手指的数组，而不仅仅是目标DOM元素上的手指。使用这些属性可以帮助我们更精确地处理触摸事件。

在开发多点触摸应用时，我们需要遵循最佳实践来提高用户体验。通过理解多点触摸的原理和最佳实践，我们可以创建出流畅、有趣的多点触摸应用，为用户提供更好的交互体验。我们还需要不断学习和新的技术，以适应移动设备的发展。设备支持触摸事件的研究报告

触摸事件的实现，在多样性和质量方面存在显著的差异。为了深入了解各种设备的触摸API实现情况，我编写了一个诊断脚本来分析相关信息。这些设备包括Nexus One和Nexus S硬件上的Android 2.3.3系统，Xoom上的Android 3.0.1系统，以及iPad和iPhone上的iOS 4.2系统。

经过测试，我们可以清晰地看到，所有被测试的浏览器都支持基本的触摸事件，如touchstart、touchend以及touchmove。这些事件为开发者提供了丰富的触摸交互功能，使得网页和应用能够更好地适应触摸操作。

尽管规范提供了额外的三个触摸事件，但在本次测试中，被测试的浏览器并未提供全面支持。这些事件包括：

1. touchenter：当手指移动并进入一个DOM元素时触发。

2. toucheleave：当手指移动并离开一个DOM元素时触发。

3. touchcancel：当触摸被中断时触发（符合实现规范）。

被测试的浏览器在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表，这些列表为开发者提供了关于触摸点的详细信息。遗憾的是，这些浏览器并没有支持radiusX、radiusY或是rotationAngle属性，这些属性能够描绘触摸屏幕的手指的形状，对于更精细的触摸控制至关重要。

值得注意的是，不论设备如何，在一次touchmove期间，事件大约会在一秒内触发60次。这表明，无论使用何种设备，触摸的响应速度都是相当快的。这种快速的响应速度对于提供流畅的用户体验至关重要。虽然有些功能在某些设备上尚未得到完全支持，但触摸功能的普及和发展势头强劲。这将有助于我们创造更丰富、更直观的用户交互体验。在不久的将来，随着技术的不断进步，我们期待看到更多出色的触摸功能被广泛应用在各种设备上。"Cambrian.render('body')"的应用场景和技术特点也有待进一步研究和。