Windows phone 8触控支持

时间:2012-11-15 11:08:56

标签: javascript browser windows-phone-8 touch dom-events

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

是否可以开箱即用,以便网页可以检测到任意触摸移动事件?

我遇到了一些浏览器问题,这些浏览器劫持了touchmove事件,将其用作滑动手势。 Windows Phone 8浏览器会做这样的事吗?

任何人都可以指出有关Windows Phone 8触摸事件的任何文档吗?

修改

这里有一个页面允许有wondows手机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中,用笔可以画出   字段,但用我的手指我只能滚动页面。这是预期的   行为?泰德约翰逊[MSFT] 2011年10月20日上午11:28#

      @SnarkMaiden:不幸的是,是的,这是IE9中的预期行为   和IE10中的文档模式9。 IE9无法覆盖默认值   平移手势。 IE10的10模式有一个新的CSS属性,   “-ms-content-zoom:none”禁用平移和缩放   目标要素。顺便说一下,这个博客在IE10的文档模式9中运行。所以   即使是触控的IE10用户也会看到这种行为。

因此,即使可以在设备上使用,也可能无法从该页面开始工作。

2 个答案:

答案 0 :(得分:37)

你应该看看这里:Updating touch and pointer events(官方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;">

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

除了没有,Windows Phone 8上的IE10还支持pan-x和pan-y属性,这些属性指定浏览器应该处理水平或垂直手势,自定义JavaScript处理程序应该处理其他所有内容。

答案 1 :(得分:2)

看起来这将类似于IE 10 for Windows,但有一些例外......

来自MSDN, "Web development for Windows Phone"

  

适用于Windows Phone OS 8.0的Internet Explorer中不支持的功能:Internet Explorer 10的桌面版本支持以下功能,但Windows Phone OS 8.0的Internet Explorer不支持这些功能。

     

...

     

CSS Touch视图 - 特别是概述,滚动和加速滚动。

     

与手势事件相关的旋转和角度事件。

<强>更新 link in your update适用于手机的IE 10。触摸SVG画布绘制多点触控。 (它不会在此区域中滚动页面,而是在页面的其余部分滚动。)