javascript - 为什么我的 WinJS 手势不触发？

Question

对于我做错了什么，我有点难过。我的最初想法是为 SVG 实现平移和缩放功能，为此我需要手势。该代码与随处发布的代码(以及 MS 文档中的代码)几乎相同。

目前有问题的 HTML 相当于这个 (klasse.html):

<div id="container" style="width:600px;height:600px; background-color:#f00;">
  <svg id="svg" version="1.1" viewBox="0 0 1920 1080" overflow="hidden" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg">
  </svg>
</div>

请注意，无论我是否包含 svg-tag 都没有什么区别。 div 容器是在绝望中诞生的(也没有改变任何东西)。

样式表(klasse.css):

#svg {
  height: 80%;
  width: 85%;
  touch-action: none;
}
#container {
  touch-action: none;
}

最后，脚本本身(klasse.js):

(function () {
  "use strict";

  WinJS.UI.Pages.define("/pages/klassen_uebersicht/klassen_uebersicht.html", {
    ready: function (element, options) {
        setTarget();
    },
    unload: function () {
    },
    updateLayout: function (element) {
    }
  });
  function setTarget() {
    var msGesture = new MSGesture();
    var elm = document.getElementById("container");

    msGesture.target = elm;
    elm.gesture = msGesture;
    elm.gesture.pointerType = null;

    elm.addEventListener("pointerdown", function (e) { console.log("pointerdown") }, false);
    elm.addEventListener("pointerup", function (e) { console.log("pointerup") }, false);
    elm.addEventListener("pointercancel", function (e) { console.log("pointercancel") }, false);
    elm.addEventListener("lostpointercapture", function (e) { console.log("lostpointer") }, false);
    elm.addEventListener("MSGestureChange", function (e) { console.log("MSGestureChange") }, false);
    elm.addEventListener("MSGestureTap", function (e) { console.log("MSGestureTap") }, false);
    elm.addEventListener("MSGestureEnd", function (e) { console.log("MSGestureEnd") }, false);
    elm.addEventListener("MSGestureHold", function (e) { console.log("MSGestureHold") }, false);
  }
})();

当我使用模拟器时，每次都会触发“正常”指针事件(pointerdown，pointerup，...)MSGesture 事件在任何情况下都不会触发，无论是哪种输入法(标准手指模式，手指模式缩放，...)我正在使用。

那么，我在这里做错了什么？因为Quickstart Documentation没有注意到我必须注意的任何进一步的复杂性。

Answer 1

我认为问题是您没有在 MSGesture 对象上调用 addPointer:

http://msdn.microsoft.com/en-us/library/windows/apps/hh968251.aspx

此页面上有一个非常完整的连接 MSGesture 事件的示例:

http://msdn.microsoft.com/en-us/library/windows/apps/hh968249.aspx

这就是 MSGesture 的有趣之处——它实际上只是一个元素外部的奇特状态机。您通过从 pointerdown 获取指针 ID 为它提供您关心的指针，然后它在您将其目标属性设置为的目标元素上触发事件。

希望对您有所帮助!