最新的 Firefox 4 Beta 版本刚刚发布（可从 这里 获取）。此 Beta 版本包含数百个错误修复、改进以及针对 Windows 7 的多点触控支持（请参阅 这里 的发行说明）。本文重点介绍多点触控支持。

Felipe Gomes 正在致力于为 网页内容添加多点触控支持。在此最新 Beta 版本中，我们正在试验此新功能。

使用多点触控、HTML5 和 CSS3 进行操作

此视频由 YouTube 托管，如果您已启用 HTML5 视频标签，则会使用该标签（请参阅此处）。YouTube 视频 链接。

多点触控事件

如果您拥有支持多点触控的显示器，则 触控事件 会发送到您的网页，其方式与鼠标事件大致相同。每个输入（使用手指创建）都会生成其自己的事件。

• MozTouchDown：当用户开始屏幕触控操作时发送。
• MozTouchMove：当用户在触控屏幕上移动手指时发送。
• MozTouchUp：当用户将手指从屏幕上抬起时发送。

触控信息

触控事件提供了一些有用的属性。

• event.streamId：请记住，它是多点触控，这意味着您必须处理来自多个来源的多个事件。因此，每个事件都带有ID来识别输入。
• event.mozInputSource：使用的设备类型（鼠标、笔或手指，如果硬件支持）。这是鼠标事件的属性。
• event.clientX/Y：坐标。

设计触控 UI

您可能希望为支持多点触控的设备提供特定的 UI。您可以使用:-moz-system-metric(touch-enabled)伪类或-moz-touch-enabled媒体查询来设计更适合手指使用的 UI。

注意：目前，此功能仅适用于 Windows 7。如果您没有支持多点触控的硬件，可以尝试 Hernan 的 多点触控模拟器。

更多乐趣

（此视频由 Felipe 制作，请参阅此处了解更多信息）。

在视频开头，您将看到网页如何获取有关多点触控输入的数据，正确跟踪接触点并区分触控输入和笔输入。

在第二部分中，您将看到多点触控输入在流体模拟器上的可视化应用，其中每个接触点都会添加一个粒子源，而移动则会向场添加力。

这两部分都使用 HTML5 的画布元素来渲染其内容。

喜欢吗？

编辑：如果您想了解更多详细信息，请查看 Felipe 的最新博文。