Why don't my WinJS Gestures fire?

Question

I'm a bit stumped as to what I'm doing wrong. My original idea was to implement a pan-and-zoom feature for a SVG and for that I need gestures. The code is pretty much the same as what is posted everywhere (and in the MS docs as well).

The HTML in question amounts to this currently (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>

Please note that it doesn't make a iota of a difference whether I include the svg-tag or not. The div-container was born from desperation (doesn't change anything either).

The stylesheet (klasse.css):

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

Finally, the script itself (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);
  }
})();

When I'm using the simulator, the "normal" pointer events fire every time (pointerdown, pointerup,...) The MSGesture events don't fire under any circumstances, regardless of which input method (Standard finger mode, Finger mode zoom,...) I'm using.

So, what am I doing wrong here? Because the Quickstart Documentation doesn't make note of any further intricacies I have to watch out for.

Answer 1

I think the issue is that you didn't call addPointer on the MSGesture object:

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

There's a pretty complete example of hooking up MSGesture events on this page:

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

That's the funny thing about MSGesture -- it's really just a fancy state machine that is external to the element. You feed it the pointers you care about by getting the pointer id from pointerdown and then it fires events on the target element you set its target property to.

Hope that helps!