Hammer.js event priority

Question

I have implemented the hammer.js library for my events. The problem is that multiple events are triggered at the same time.

Can I set somekind of event priority. Let's say when transforming is beeing done all other events are ignored. When transform stops other events can be done.

    hammertime.on("transform", function(evt) {
      //transform
    }

    hammertime.on("drag", function(ev) {
       //drag
    }

I've already tried something like this: Disabiling drag when we start transforming

 hammertime.on("transform", function(evt) {
          //transform
          hammertime.options.drag="false";
}

And enabeling it back when transform is finished

 hammertime.on("transformend", function(evt) {
          //transformend
          hammertime.options.drag="true";
 }

This approach works fine except somethimes the drag doesn't get back set to true. I want a 100% working sollution. Please help...

Can you please comment instead of giving minuses? Thank you! — Jacob, Apr 17 '13 at 12:40
Have you tried calling `evt.stopPropagation()` or `evt.preventDefault()`? I don't know if they're present on Hammer.JS, but I think so, as it has jQuery support... — gustavohenke, Apr 22 '13 at 13:34

Brandon · Answer 1 · 2013-04-22T14:14:36.620

One cheap way to do this is to have your event handlers cooperate:

var transforming = false;
hammertime.on("transformstart", function (ev) { transforming = true; ... });
hammertime.on("transformend", function (ev) { transforming = false; });
hammertime.on("drag", function (ev) { if (!transforming) { ... } });

If Hammer is not always calling your transformend, then unfortunately all you can do to work around the bug is use some sort of timer that ends your transform if a certain amount of time goes by. It is not perfect, but it can help you recover from the possible bug in Hammer:

var transformTimer = undefined,
    transforming = false;
hammertime.on("transform", function (ev) {
    transforming = true;
    if (transformTimer !== undefined) clearTimeout(transformTimer);
    transformTimer = setTimeout(function () {
        transformTimer = undefined;
        transforming = false;
    }, 1000); // end the transform after 1s of idle time.

    // your transform code goes here
});
hammertime.on("transformend", function () {
    if (transformTimer !== undefined) {
        clearTimeout(transformTimer);
        transformTimer = undefined;
    }
    transforming = false;
});
hammertime.on("drag", function (ev) { if (!transforming) { ... } });

The sollution works just like my above. Works in generall but somethimes fails to set the transforming back to false and so drag stays disabled... — Jacob, Apr 22 '13 at 14:00
Ah I changed the code to use `transformstart` instead of `transform`. It is possible there are bugs in hammer, either it is calling `transform` after `transformend` sometimes (which this change will work around), or it does not always call `transformend` which would be a bug in Hammer that needs fixing. Try adding some `console.log` statements to `transformstart` and `transformend` to see if you get an `end` for every `start`. — Brandon, Apr 22 '13 at 14:09

score 2 · Answer 2 · answered Apr 23 '13 at 18:24

2

try ev.gesture.stopDetect();

see the wiki of Hammer for some details about that! https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults

answered Apr 23 '13 at 18:24

Jorik

641
5
6

score 2 · Answer 3 · answered Jan 12 '14 at 12:21

I've just managed to fix that bug.

            var transforming = false;
            var transformTimer = null;          

            hammertime2.on('touch drag dragend transform', function(ev) {
                manageMultitouch(ev);
            });

            hammertime2.on("transformstart", function(evt) {                    
                transforming = true;
            });

            hammertime2.on("transformend", function(evt) {
                setTimeout(function () {       
                    transforming = false;
                }, 1000);
            });

        function manageMultitouch(ev){              

            if (transforming && (ev.type == 'drag' || ev.type =='dragend') ) return;

            switch(ev.type) {
                case 'touch':                      
                    break;

                case 'drag':
                    break;

                case 'transform':
                    transforming = true;                       
                    break;

                case 'dragend':
                    break;
            } 

        }

The important part here is that while you are doing 'Transform' always set transforming = true;

Hammer.js event priority

3 Answers3