IEBlog：IE10和Metro应用的触摸输入

当网站可以接收新的输入设备并且有触摸屏的时候，它的交互性、趣味性，真实性會变的更好。 Windows开发者预览版就支持在网站或是APP应用中通过触摸或是笔输入信息。如此强大的新体验，开发者完全可以在他们的网站中应用。您可以在 IE Test Drive上面看到这些新功能的最新demo，比如： Touch Effects, Lasso Birds, and Flying Images.


可以处理触摸输入却不影响鼠标操作

Windows 8下面Metro风格的IE和应用程序给Windows带来了全新的触摸体验，却并没有牺牲其他形式的输入。

还是从基本说起吧。在IE10和Metro应用中，有一個抽象名词，叫做“指針”。一個指针事件可以由屏幕上的任何的点击产生，比如鼠标、笔、手指或是多个手指。这个模型可以使开发者不用关注硬件就很容易的去开发网站和APP应用了。这很类似于我们硬件加速的方法，体验会随着硬件性能的提升而变得更加友好。

捕捉指针事件就像捕捉鼠标事件一样，如：MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut等

指针事件提供了鼠标事件中常用的属性（客户端X/Y坐标、目标元素、按钮状态等）。还有其他新型的输入：压力，接触形状、倾斜等。所以开发者根部不用考虑硬件，就很容易编写出指针事件相关的APP。

有时，开发者想根据不同的触摸类型提供不同的体验，指针事件有event.pointerType 属性，通过此属性可以标识出输入的类型（手，笔，鼠标等）。

下面是个原生的画图实例，是将 IE10 Developer Guide中的某个例子简单改了下：

	<style>
		html {
			overflow: hidden;
			-ms-content-zooming: none; /* Disable pan/zoom */
		}
	</style>
	 
	<canvas id="drawSurface" width="500" height="500" style="border: 1px solid black;"></canvas>
	 
	<script type='text/javascript'>
		var canvas = document.getElementById("drawSurface");
		var context = canvas.getContext("2d");
		context.fillStyle = "rgba(255, 0, 0, 0.5)";
		canvas.addEventListener("MSPointerMove", paint, false);
		 
		function paint(event) {
			context.fillRect(event.offsetX, event.offsetY, 5, 5);
		}
	</script>

默认情况下，IE10可以通过触摸平移或缩放。有时，开发人员可能要管理网站本身的平移和缩放。在这个例子中，我们展示了如何通过触摸输入来达到用 overflow:hidden and –ms-content-zooming: none 规则达到的同样的效果。

内置支持多点触摸
向下、向上、移动都可以通过各个触摸联系起来。所以上面的小例子很不错，因为可以不用特殊的代码就能实现如此好的绘画效果。有些情况下，您可能想知道屏幕上其他指针的信息，好变态的需求，不过没问题。其实，在任何指针事件中，你都可以很轻易的得到屏幕上所有指针的信息列表。

	<style>
		html {
			overflow: hidden;
			-ms-content-zooming: none; /* Disable pan/zoom */
		}
		#foo {
			width: 500px;
			height: 500px;
			background-color: red;
		}
	</style>
	 
	<div id="foo"></div>
	 
	<script>
		function handleEvent(event) {
			var currentPointers = event.getPointerList();
			 
			if (currentPointers.length == 1) {
				event.target.style.backgroundColor = "red";
			} else {
				event.target.style.backgroundColor = "green"; //multiple touch points are used
			}
		}
		 
		document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);
	</script>

先进的手势输入
Windows Developer Preview还可以识别高水平的手型，像缩放，平移，旋转等。开发者通过MSGestureStart, MSGestureChange, and MSGestureEnd 事件可以很容易得到这些信息。不仅如此，这些手型的变换信息都可以被应用程序得到，比如CSS的转换等。

	<style>
		html {
		overflow: hidden;
		-ms-content-zooming: none; /* Disable pan/zoom */
	}
	#foo {
		background-color: red;
		width: 500px;
		height: 500px;
		-ms-transform-origin: 50%;
		-ms-transform-origin: 50%;
	}
	</style>
	 
	<div id="foo"></div>
	 
	<script>
		function handleEvent(event) {
			event.target.style.msTransform = "scale(" + event.scale + ")";
		}
		 
		document.getElementById("foo").addEventListener("MSGestureChange", handleEvent, false);
	</script>

特征检测，回退，并支持其他平台

当程序运行在其他平台时，IE10为指针事件提供了简单的特征检测

	if (window.navigator.msPointerEnabled) {
		// the system will fire pointer events
	}

利用特征检测，程序就可以跨平台运行。Lasso Birds就是一个很典型的例子，它可以在Windows 8 Developer Preview，Apple ios，android都运行良好。Windows8下面是通过指针事件来处理输入，其他平台是将鼠标事件和专有触摸事件的结合，来提供类似的体验。

	if (window.navigator.msPointerEnabled) {
		elm.addEventListener("MSPointerDown", handleInput, false); // Fires for touch, pen, and mouse
	} else {
		elm.addEventListener("mousedown", handleInput, false); // Fires for mouse only
	}

指针和手型事件是我们触摸模型的一部分。我们会在后续的博客中继续就Lasso Birds来讲解更多的触摸API

详细的关于指针事件、手型事件、或其他触摸API的信息，可以去看 IE10 Developer Guide. 我们很期待看到您关于触摸的实例，在线等待您的反馈。

—Jacob Rossi, Program Manager, Internet Explorer

原文 ：http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx  2011-9-21