IE 10让网站在平板触摸体验更炫酷

随着新的输入设备和触摸屏的到来,网络变得更具有互动性、更有趣、更令人身临其境。Windows 8在网站和应用程序中引入了...
随着新的输入设备和触摸屏的到来,网络变得更具有互动性、更有趣、更令人身临其境。Windows 8在网站和应用程序中引入了对触摸输入和手写笔输入处理的支持,Modern UI风格的IE 及应用程序给Windows 8带来了一流的触摸体验,同时并没有牺牲其他形式的输入。网站开发人员现在可以很轻松的确保他们的网站可以很好地支持触摸操作,构建出震撼的新体验,最大限度地利用多点触摸设备、手势等高级输入方式。在Internet Explorer 测试驱动网站上新增和更新的演示触摸效果、捕鸟游戏、飞行图片中可以看到实际的效果。

  1. 在不影响鼠标的情况下,优先处理触摸输入
  首先从基本的输入处理开始。在IE10 和Modern UI风格的应用程序中,开发人员能够写入更抽象的输入形式,称为“Pointer”。Pointer 可以是鼠标光标、笔、手指、或多个手指在屏幕上的任何接触点。利用这个模型编写的网站和应用程序,不论用户使用什么样的输入硬件,都可以很好地工作。与硬件加速的方法类似,硬件越好,这个体验越好,但开发人员编程时使用的API 却是与硬件无关的。

pointer.png


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

  1. <style>
  2. html {
  3. overflow: hidden;
  4. -ms-content-zooming: none; /* Disable pan/zoom */
  5. }
  6. </style>
  7. <canvas id="drawSurface" width="500" height="500" style="border: 1px solid
  8. black;"></canvas>
  9. <script type='text/javascript'>
  10. varcanvas = document.getElementById("drawSurface");
  11. varcontext = canvas.getContext("2d");
  12. context.fillStyle= "rgba(255, 0, 0, 0.5)";
  13. canvas.addEventListener("MSPointerMove", paint, false);
  14. function paint(event) {
  15. context.fillRect(event.offsetX, event.offsetY, 5, 5);
  16. }
  17. </script>
复制代码
  Internet Explorer 10 默认启用触摸屏幕的触控(panning)和缩放。开发人员有时可能想自行管理网站的触控和缩放。在这个示例中,我们将介绍如何在网站上处理触摸输入,以及如何使用样式规则overflow: hidden 和–ms-content-zooming: none 准确地禁止触控和缩放。

  2. 内置的多点触摸支持
  每次触摸接触都会触发按下、移动、抬起一系列事件。所以上面绘图示例这样的应用程序无需任何特殊代码就能支持多点触摸。某些情况下可能需要了解屏幕上其他Pointer 的信息。在任何Pointer 事件中,都可以方便地得到屏幕上所有Pointer 的完整列表:

  1. <style>
  2. html {
  3. overflow: hidden;
  4. -ms-content-zooming: none; /* 禁用触控和缩放*/
  5. }
  6. #foo {
  7. width: 500px;
  8. height: 500px;
  9. background-color: red;
  10. }
  11. </style>
  12. <div id="foo"></div>
  13. <script>
  14. functionhandleEvent(event) {
  15. varcurrentPointers= event.getPointerList();
  16. if (currentPointers.length== 1) {
  17. event.target.style.backgroundColor= "red";
  18. } else {
  19. event.target.style.backgroundColor= "green"; //使用了多点触摸点
  20. }
  21. }
  22. document.getElementById("foo").addEventListener("MSPointerMove", handleEv
  23. ent, false);
  24. </script>
复制代码
  3. 高级手势输入
  Windows还支持高级Pointer 手势的识别,例如缩放、触控和旋转。开发人员可以通过MSGestureStart、MSGestureChange和MSGestureEnd事件方便地利用这些支持。对于每个手势,都提供了手势转换的信息(旋转、绽放、转变,等等),可以用多种方式在应用程序中使用,例如CSS 转换:

  1. <style>
  2. html {
  3. overflow: hidden;
  4. -ms-content-zooming: none; /* 禁用触控和缩放*/
  5. }
  6. #foo {
  7. background-color: red;
  8. width: 500px;
  9. height: 500px;
  10. -ms-transform-origin: 50%;
  11. -ms-transform-origin: 50%;
  12. }
  13. </style>
  14. <div id="foo"></div>
  15. <script>
  16. functionhandleEvent(event) {
  17. event.target.style.msTransform= "scale(" + event.scale+ ")";
  18. }
  19. document.getElementById("foo").addEventListener("MSGestureChange",
  20. handleEvent, false);
  21. </script>
复制代码
  4. 功能检测、fallback 和其他模型的支持
  对于跨其他平台使用的代码,IE10 为Pointer 事件提供了简单的功能检测:

  1. if (window.navigator.msPointerEnabled) {
  2. // 系统将触发Pointer 事件
  3. }
复制代码
  注意:在Windows8中,这个属性代表系统支持触摸输入或笔输入的Pointer 事件。但未来会更新,代表对鼠标、笔、触摸设备的Pointer 事件支持。使用功能检测,可以让网站支持不同的输入模式。“捕鸟”游戏示例在Windows 8、Apple iOS、Google Android、以及纯鼠标系统上都运行得很好。在Windows 8上,它使用Pointer 事件在一条代码路径中处理所有输入。在其他平台上,它使用鼠标事件和专门的触摸事件结合,提供类似的体验。

  1. if (window.navigator.msPointerEnabled) {
  2. elem.addEventListener("MSPointerDown", handleInput, false); // 对触摸、笔、鼠标
  3. 触发
  4. } else {
  5. elem.addEventListener("mousedown", handleInput, false); // 仅对鼠标触发
  6. }
复制代码
  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
标签: ie