为了平板，让网站触摸体验更炫酷

流泪唱情歌 · 发表于 2012-11-8 12:03:57

　　
　　随着新的输入设备和触摸屏的到来，网络变得更具有互动性、更有趣、更令人身临其境。Windows8在网站和应用程序中引入了对触摸输入和手写笔输入处理的支持，ModernUI风格的IE及应用程序给Windows8带来了一流的触摸体验，同时并没有牺牲其他形式的输入。网站开发人员现在可以很轻松的确保他们的网站可以很好地支持触摸操作，构建出震撼的新体验，最大限度地利用多点触摸设备、手势等高级输入方式。在InternetExplorer测试驱动网站上新增和更新的演示触摸效果、捕鸟游戏、飞行图片中可以看到实际的效果。
　　
　　1.在不影响鼠标的情况下，优先处理触摸输入
　　
　　首先从基本的输入处理开始。在IE10和ModernUI风格的应用程序中，开发人员能够写入更抽象的输入形式，称为“Pointer”。Pointer可以是鼠标光标、笔、手指、或多个手指在屏幕上的任何接触点。利用这个模型编写的网站和应用程序，不论用户使用什么样的输入硬件，都可以很好地工作。与硬件加速的方法类似，硬件越好，这个体验越好，但开发人员编程时使用的API却是与硬件无关的。
　　
　　

　　
　　Pointer事件封装了来自触摸、笔、鼠标的输入，有助于构建与独立于硬件的体验
　　
　　捕捉通用Pointer输入的事件，看起来与鼠标事件很像：MSPointerDown,MSPointerMove,MSPointerUp,MSPointerOver,MSPointerOut等。
　　
　　Pointer事件提供了鼠标事件的全部常规属性（客户的X/Y坐标、目标元素、按钮状态等），还提供了针对其他输入形式的新属性：压力、接触几何、倾斜等。所以开发人员很容易针对Pointer事件编程，不论使用什么样的输入硬件，他们的程序都可以工作。
　　
　　有些时候，开发人员想为触摸输入提供不同的体验。这时，Pointer事件也可以通过event.pointerType属性指定输入的类型（触摸、笔、鼠标）。
　　
　　下面是对IE10开发人员指南（http : //msdn . microsoft . com/library/ie/hh673549.aspx）中的绘图程序稍加修改的一个基本的绘图程序：
　　
　　

　　
　　InternetExplorer10默认启用触摸屏幕的触控（panning）和缩放。开发人员有时可能想自行管理网站的触控和缩放。在这个示例中，我们将介绍如何在网站上处理触摸输入，以及如何使用样式规则overflow:hidden和–ms-content-zooming:none准确地禁止触控和缩放。
　　
　　2.内置的多点触摸支持
　　
　　每次触摸接触都会触发按下、移动、抬起一系列事件。所以上面绘图示例这样的应用程序无需任何特殊代码就能支持多点触摸。某些情况下可能需要了解屏幕上其他Pointer的信息。在任何Pointer事件中，都可以方便地得到屏幕上所有Pointer的完整列表：
　　
　　

　　
　　3.高级手势输入
　　
　　Windows还支持高级Pointer手势的识别，例如缩放、触控和旋转。开发人员可以通过MSGestureStart、MSGestureChange和MSGestureEnd事件方便地利用这些支持。对于每个手势，都提供了手势转换的信息（旋转、绽放、转变，等等），可以用多种方式在应用程序中使用，例如CSS转换：
　　
　　

　　
　　4.功能检测、fallback和其他模型的支持
　　
　　

　　
　　注意：在Windows8中，这个属性代表系统支持触摸输入或笔输入的Pointer事件。但未来会更新，代表对鼠标、笔、触摸设备的Pointer事件支持。使用功能检测，可以让网站支持不同的输入模式。“捕鸟”游戏示例在Windows8、AppleiOS、GoogleAndroid、以及纯鼠标系统上都运行得很好。在Windows8上，它使用Pointer事件在一条代码路径中处理所有输入。在其他平台上，它使用鼠标事件和专门的触摸事件结合，提供类似的体验。
　　
　　

　　
　　Pointer事件和手势事件只是触摸开发人员模型的一部分。在未来的文章中，我们将深入介绍其他触摸API以及“捕鸟”游戏。
　　
　　关于Pointer事件、手势事件、以及其他触摸API的更多细节，请参阅IE10开发人员指南（http : //msdn . microsoft . com/library/ie/hh673549.aspx）也可以通过（http : //connect . microsoft . com/ie）提供反馈。
　　
　　良好的触摸体验对于网站用户是非常友好的，很多开发者将自己的网站优化并适应移动设备之后，发现触摸体验上有一些影响，这篇文章能够帮助你了解一些关于触摸的内容，，更多内容可以参阅IE10兼容性白皮书，获得更多的帮助，下载地址：http : //vdisk . weibo . com/s/bKgeq
　　