Windows Phone 8 触控支持 [英] Windows phone 8 touch support

问题描述

windows phone 8 是否完全支持默认浏览器中的触摸事件?

它是否开箱即用，以便网页可以检测到任意的 touchmove 事件?

我遇到了一些浏览器的问题，这些浏览器劫持了 touchmove 事件以将其用作界面作为滑动手势.windows phone 8 浏览器有这种功能吗?

谁能指出有关 Windows Phone 8 触摸事件的任何文档?

这里有一个页面可以让拥有 wondows phone 8 的人测试触摸功能:http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx

如果有人可以试用并告诉我它是否有效，我将不胜感激.

然而，有一些评论......

<块引用>

SnarkMaiden 2011 年 10 月 20 日上午 11:17 # 只是为了好奇；我有平板电脑带笔和触摸的 PC - 在 IE9 中，用笔我可以在字段，但我的手指只能滚动页面.这是预期的吗行为?Ted Johnson [MSFT] 2011 年 10 月 20 日上午 11:28 #

@SnarkMaiden:不幸的是，是的，这是 IE9 中的预期行为和 IE10 中的文档模式 9.IE9 没有办法覆盖默认平移手势.IE10 的 10 模式有一个新的 CSS 属性，"-ms-content-zooming: none" 禁用平移和缩放目标元素.顺便说一句，该博客在 IE10 中以文档模式 9 运行.所以即使是 IE10 用户也看到了这种行为.

因此，即使可以在设备上运行，该页面也可能无法正常工作.

解决方案

你应该看看这里:更新触摸和指针事件(官方 Windows Phone 开发者博客文章).

<小时>

引用链接文档的相关部分

WebKit 和 Internet Explorer 10 处理触摸事件的方式不同.WebKit 支持与鼠标操作分离的触摸界面；IE10 将触摸、鼠标和手写笔组合到一个界面(指针)中.指针事件模型也已提交给 W3C 以在指针事件工作组下进行标准化.尽管它们不同，但模型大体相似，因此通常可以通过最少的代码更改来添加对指针事件的支持.

添加指针事件监听器

指针 API 使用标准的向下、移动、向上"事件模型.因此，将现有事件处理程序的侦听器连接到指针事件很简单.

之前

this.element.addEventListener("touchstart", eventHandlerName, false);this.element.addEventListener("touchmove", eventHandlerName, false);this.element.addEventListener("touchend", eventHandlerName, false);

之后

if (window.navigator.msPointerEnabled) {this.element.addEventListener("MSPointerDown", eventHandlerName, false);this.element.addEventListener("MSPointerMove", eventHandlerName, false);this.element.addEventListener("MSPointerUp", eventHandlerName, false);}this.element.addEventListener("touchstart", eventHandlerName, false);this.element.addEventListener("touchmove", eventHandlerName, false);this.element.addEventListener("touchend", eventHandlerName, false);

关闭默认触摸行为

Internet Explorer 10 中的指针事件模型要求您明确指出页面的哪些区域将使用自定义手势处理(使用您刚刚添加的代码)，以及哪些区域将使用默认手势处理(平移页面).您可以通过在应该使用 -ms-touch-action 属性选择退出默认手势处理的元素上添加标记来实现此目的.例如:

之前

之后

<div id="slider" style="overflow: hidden; -ms-touch-action: none;">

除了 none 之外，Windows Phone 8 上的 IE10 还支持 pan-x 和 pan-y 属性，它们指定浏览器应处理水平或垂直手势，而自定义 JavaScript 处理程序应处理其他一切.

Does windows phone 8 fully support touch events within the default browser?

Does it work out of the box so that arbitrary touchmove events can be detected by a web-page?

I have had issues with some browsers which hijack the touchmove events to use for their interface as a swipe gesture. Does windows phone 8 browser do anything like that?

Can anyone point to any documentation about windows phone 8 touch events?

EDIT:

There is a page here that would allow someone with a wondows phone 8 to test the touch capabilities: http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx

I would greatly appreciate if someone could try it out and let me know if it works or not.

However, there are a couple of comments...

SnarkMaiden 20 Oct 2011 11:17 AM # Just for curiosity; I have a tablet PC with both pen and touch - in IE9, with the pen I can draw in the field but with my finger I can only scroll the page. Is that expected behaviour? Ted Johnson [MSFT] 20 Oct 2011 11:28 AM #

@SnarkMaiden: Unfortunately, yes, that's the expected behavior in IE9 and document mode 9 in IE10. IE9 has no way to override the default panning gesture. IE10's 10 mode has a new CSS property, "-ms-content-zooming: none" that disables panning and zooming on the target element. BTW, this blog runs in document mode 9 in IE10. So even IE10 users with touch are also seeing this behavior.

So still might not work form that page, even if it is possible on the device.

解决方案

You should take a look at here: Updating touch and pointer events (official Windows Phone developer blog post).

---

EDIT: quote relevant parts of linked document

WebKit and Internet Explorer 10 handle touch event handling differently. WebKit supports a touch interface that is separate from mouse handling; IE10 groups touch, mouse, and stylus into a single interface (pointer). The pointer event model also has been submitted to the W3C for standardization under the Pointer Events Working Group. Although they are different, the models are generally similar, so support for pointer events can generally be added with minimal code changes.

Adding pointer event listeners

The pointer API uses a standard "down, move, up" event model. Therefore, it’s simple to hook up listeners for existing event handlers to pointer events.

Before

this.element.addEventListener("touchstart", eventHandlerName, false); 
this.element.addEventListener("touchmove", eventHandlerName, false);
this.element.addEventListener("touchend", eventHandlerName, false);

After

if (window.navigator.msPointerEnabled) {
  this.element.addEventListener("MSPointerDown", eventHandlerName, false);
  this.element.addEventListener("MSPointerMove", eventHandlerName, false);
  this.element.addEventListener("MSPointerUp", eventHandlerName, false);
}
this.element.addEventListener("touchstart", eventHandlerName, false);
this.element.addEventListener("touchmove", eventHandlerName, false);
this.element.addEventListener("touchend", eventHandlerName, false);

Turning off default touch behavior

The pointer event model in Internet Explorer 10 requires you to explicitly indicate which areas of the page will have custom gesture handling (using the code you just added), and which will use default gesture handling (pan the page). You can do this by adding markup on elements that should opt out of default gesture handling using the -ms-touch-action property. For example:

Before

<div id="slider" style="overflow: hidden;">

After

<div id="slider" style="overflow: hidden; -ms-touch-action: none;">

In addition to none, IE10 on Windows Phone 8 also supports the pan-x and pan-y properties, which specify that the browser should handle horizontal or vertical gestures, and custom JavaScript handlers should handle everything else.

这篇关于Windows Phone 8 触控支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！