让 Web 使用任何输入方式均可“正常运行”:鼠标、触控和指针事件

我们最近宣布在适用于 Windows Phone 8.1 更新的 Internet Explorer 中支持触控事件 API,这是我们为了让 Web 对我们的用户“正常运行”所做努力的一部分。这意味着 IE 现在支持所有三种主要的指针输入 API:鼠标事件、触控事件和指针事件。虽然移动浏览体验得到改善,但与此同时开发人员开始考虑应使用哪种 API。

考虑到 Firefox 即将支持指针事件,而 Google 最近决定不执行此规范,为了帮助开发人员了解各种 API 的使用场合,我们想分享我们经过更新的指导原则,以及有关我们认为 Web 平台下一步发展的前瞻性想法。

比较和对比模型

我们希望开发人员使用适合他们的输入技术。我们提供了互操作触控事件和技术领先的指针事件,前者适用于如今最为广泛的跨浏览器访问,而后者可实现更简单的编码模式、更多的功能、更多的设备支持、更简单的响应迅速的设计和最佳的硬件加速。下面是各种模型的质量和功能的明细。

  鼠标事件 触控事件 指针事件
支持鼠标   1  
支持单点触控 2    
支持多点触控      
支持手写笔、Kinect 和其他设备 2    
提供移入/移开/进入/离开事件和悬停      
异步启动平移/缩放,实现硬件加速      
W3C 规范   3 3
在移动设备上可跨浏览器使用     4
在桌面设备上可跨浏览器使用     4

1 至少在某些 Android 浏览器中,触控事件会因鼠标输入而触发。但是,无法区分这种鼠标输入与使用触控事件时的实际触控输入。

2 所有浏览器都会因单点触控输入触发某些鼠标事件,以便保持与基于鼠标的网页的兼容性。但是,目前不能区分触控输入与使用触控事件时的实际鼠标输入。同样,在 IE 中用于 Xbox 的 Kinect 手势输入也会为了实现基本兼容性而触发某些鼠标事件。

3 指针事件目前是有望很快成为建议事件的备选建议事件。触控事件是建议事件。在 2012 年,Web 事件工作组断然终止了触控事件版本 2 的工作,并解散了支持指针事件标准化的工作组。

4 IE 完全支持指针事件,并且 Firefox 也即将完全支持指针事件。Chrome、Firefox 和 Opera 提供部分支持(触控操作 API),而 Safari WebKit 正在考虑提供部分支持。通过 Google Polymer 指针事件Hand.JS 等 polyfill 插件,可跨浏览器使用指针事件模型。

请查看此 HTML5 Rocks 文章,详细了解它们的一些差异和问题。

性能

性能是输入,特别是触控输入的关键。现实是您只是在一层玻璃上滑动手指,而我们希望的是感觉像在您移动网页一样。因此,我们花了 3 年进行工程设计,将 IE 的触控管道重新架构为四线程的 GPU 加速管道(从 IE10 开始,并在 IE11 中改进),并且我们设计了指针事件来利用这些类型的体系结构,这些优势后来也开始出现在其他现代浏览器中。

平移和缩放通常是最重要的触控交互,在 IE 和 Chrome for Windows 的所有触控手势中占 60% 以上的比重。几乎每个本机应用、Web 应用或网站都会使用平移和/或缩放。就输入性能而言,手势很能说明问题。如果平移反应迟缓(在延迟一段时间后才跳至手指所在位置)或断断续续(丢帧),您会注意到它只是玻璃而已,并会记住这一点。

触控事件要求运行同步的 JavaScript 后再开始平移或缩放,这样会导致大约数百毫秒或更长时间的延迟,从而引起重大性能问题。因此,切换到指针事件可能会显著改善触控体验:

触控事件可能对平移和缩放性能造成的影响的演示(在 Android LG Nexus 5 和 Windows Phone HTC 8x 中)。
指针事件会启用硬件加速、异步触控操作,这些功能通常可以提高性能。

在此基本示例测试页面(延迟配置为 1000 毫秒,由 Chrome 团队的 Rick Byers 开发)中,使用 IE 中的触控事件,可以看到在移动触控触点 1020 毫秒并行进 4.8 厘米后才呈现平移的第一个帧,用户可明显感觉到这一点。只需将触控事件处理程序替换为指针事件处理程序,即可将此延迟缩短到 31 毫秒和 0.3 厘米,使性能提高 32 倍以上。

虽然此测试页面的延迟是人为造成的,却展示了 Web 上常见的基本性能问题。在实践中,与 1000 毫秒值表现出的延迟相比,我们看到的页面的延迟有短有长。此变量极大地依赖于浏览器的主要线程,会导致无法预测的用户体验,并且会妨碍实现 1 毫秒的最佳响应时间。Microsoft Research 的尖端科技研究人员展示了此类延迟减少所产生的令人难以置信的用户影响。我们仍然在为实现 1 毫秒的平移/缩放响应时间而努力,并将指针事件视为达到此目标的关键一步。

指针事件还具有触控事件所不具备的其他功能,例如开发人员要求的移入/移开/进入/离开过渡事件,更多功能意味着更多开销。但我们已经为了降低这些开销而进行了大量投入。通常,这些功能所需的额外点击测试总计只能缩短 0.15 毫秒的延迟,如果我们开始看到证据能证明这对开发人员实现 60FPS 性能的能力的影响,我们就会了解如何进一步改善此功能。

兼容性

我们宣布支持触控事件的博文中,我们曾提到桌面 Web 中阻止我们以兼容方式将此 API 引入这些设备的问题。例如,如果在桌面上启用触控事件,则以下常见编码模式会中断鼠标支持:

在此错误的模式中,不能在支持触控事件的任何浏览器中关联关键的鼠标事件处理(无论设备实际上是否有触摸屏)。此问题会导致菜单、下拉列表、共享图标等功能出现严重问题,并会导致鼠标不能在 Web MDMacysOnetPages JuanesGloboSamsung淘宝Huffington Post 等网站上正常工作。

为了让用户触控体验和开发人员的生活更轻松,我们希望完成以下任务:

  • 将触控事件支持添加到 Windows Phone 的 IE 中 (已完成)
  • 与网站开发人员合作,解决上面提到的希望有一天我们能够以负责任的方式启用 API 的问题(正在进行的工作:密切关注我们的宣传团队和 webcompat.com 的电子邮件或 tweet)。
  • 将触控事件引入我们所有的平台,减少支持矩阵对开发人员的困扰(正在进行的工作
  • 致力于在其他平台上实施指针事件(在 FirefoxChrome正在进行的工作
  • 积极接洽网站和框架开发人员,倾听他们的反馈以及所需的 Web 平台发展方向
  • 共享我们的内部设计文档、架构图、测试方法和我们的其他浏览器的代码(正在进行的工作

许多开发人员会发现,最简单的方法是通过其他浏览器的 polyfill 插件(例如 Google Polymer 指针事件Hand.JS)使用指针事件。但如果选择使用触控事件,则务必同时提供适当的鼠标支持,并且决不能想当然地认为存在触控事件 API 即表示设备有触摸屏。

展望未来

输入事件仍然是各种浏览器和设备上较大的互操作性难题之一。与大多数互操作问题一样,此难题必然会以复杂的编码模式和兼容性问题的形式让开发人员和用户煞费苦心。我们致力于通过浏览器中的互操作性工作和 W3C 的标准化工作改善这种体验。

我们希望构建一个适合 Web 开发人员和我们的用户的平台。请向我们提供反馈 - 哪种平台适合您?哪种不适合您?您接下来想要看到哪种平台?请在 @iedevchatChromeFirefox 问题跟踪器中直言不讳。

项目经理
Jacob Rossi