locked
tap gesture

    Question

  • Hello guys.

    So, I'm still playing with the pointer and gesture apis and I'm a little but curious about the meaning of tapping. Ok, so it's probably best to define tap before going on. TO me, tap means putting the finger down in an element for a really small amount of time. During the contact, there's a probability of making a small move (up, down, left, right). Now, I believe that putting the finger down for more than a specific time threshold will probably "promote" the tap to a hold, right? But if that time threshold isn't hit, then it should always be considered a tap and not a hold, even though there might be some finger movement while it's still in contact with the element. Is this correct?

    As I said, I'm still playing with the api and so I've changed my demo app (which allows me to draw in svg and do some panning) so that it will process tap events. In order to do that, I've initialized my GestureRecognizer with the following code:

    function inicializaGestos(){
        gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
        gestureRecognizer.gestureSettings = Windows.UI.Input.GestureSettings.tap;
        gestureRecognizer.addEventListener("tapped", onTapped);
    }

    Since I'm only interested in tap, I think I don't need anything more. Since I'm still handling the pointer down, move and up events, I think this is the perfect place to redirect them to the gesture API if I've got that option on the appbar:

    function pointerDown(evt) {        
        if (evt.pointerType === 4 && evt.button !== 1) {
            return;
        }      
        if (currentCmd.id == "desenhar") {           
            retangulo.x = evt.offsetX;
            retangulo.y = evt.offsetY;
            retangulo.atualizaFigura(figuraAuxiliar);
            area.appendChild(figuraAuxiliar);
            evt.preventMouseEvent();
        }
        else {
            console.log("passing to gesture");
            gestureRecognizer.processDownEvent(evt.currentPoint);
        }        
        pointerID = evt.pointerId;
        evt.target.msSetPointerCapture(pointerID);
    }
    function pointerMove(evt) {
        if (evt.pointerId !== pointerID) return;
        evt.preventMouseEvent();
        if (currentCmd.id === "desenhar") {
            retangulo.width = evt.offsetX - retangulo.x;
            retangulo.height = evt.offsetY - retangulo.y;
            retangulo.atualizaFigura(figuraAuxiliar);
            retangulo.log();
        }
        else {
            gestureRecognizer.processMoveEvents(evt.intermediatePoints);
        }
    }
    function pointerUp(evt) {
        evt.preventMouseEvent();
        if (currentCmd.id === "desenhar") {
            figuraAuxiliar = inicializaFigura();
            retangulo.efetuaReset();
        }
        else {
            gestureRecognizer.processUpEvent(evt.currentPoint);
        }
        evt.target.msReleasePointerCapture(pointerID);
        pointerID = null;
    }

    before going on, I should also mention that my svg is set to 120% of the parent (body element) and that I'm currently supporting panning too (choosing draw or tap option from the app bar results in setting the body element's -ms-touch-action to none).

    Now, since i don't have a tab, I'm using the simulator to test my app. Whenever I to a simple touch in the rect (since I'm using the mouse, this means just clicking ), my tapped method gets called. However, if I hold the mouse and do a slight press, the event no longer gets called. This probably means I'm missing something, but what?

    thanks


    Luis Abreu

    Thursday, March 15, 2012 10:18 AM

All replies

  • Wow,  Lots of info there my friend :-).

    Gestures are different then MSPointer events.  Think of a tap as just that... a press and release... think of tapping your fingers impatiently on the desk while waiting for a forum answer.  Does that help?  It sounds like you want the MSPointerDown and MSPointerMove events for what you are doing.  See the BallinEight sample: Input: manipulations and gestures using JavaScript sample           

    That said, see how they are setting up the tapped handler...  Run this in the simulator and tap or mouse click in the field (not on the ball) and you will see the handler is called.

    -Jeff


    Jeff Sanders (MSFT)

    Friday, March 16, 2012 8:24 PM
    Moderator
  • Hello Jeff.

    Yes, I've looked at the code. still not sure on why they use a div over the svg element. is there any known limitation on getting gestures from the svg element? Btw, in my case, I've ended up with hooking the MSGEstureXXX events in that app instead of using the gesturerecognizer api. now, I need to take a look at the gesture and try to make it work here...


    Luis Abreu

    Friday, March 16, 2012 8:58 PM