Hammer.js 事件优先级答案

【问题标题】：Hammer.js event priorityHammer.js 事件优先级
【发布时间】：2013-04-17 12:37:14
【问题描述】：

我已经为我的活动实现了hammer.js 库。问题是同时触发了多个事件。

我可以设置某种事件优先级吗？假设在完成转换时，所有其他事件都将被忽略。当变换停止时，可以完成其他事件。

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

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

我已经尝试过这样的事情：当我们开始变形时禁用拖动

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

并在转换完成后重新启用它

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

这种方法可以正常工作，但有时拖动不会重新设置为 true。我想要一个 100% 有效的解决方案。请帮忙...

【问题讨论】：

能否请您发表评论而不是给出缺点？谢谢！
您是否尝试过致电evt.stopPropagation() 或evt.preventDefault()？我不知道它们是否存在于 Hammer.JS 上，但我认为是的，因为它支持 jQuery...

标签： javascript events hammer.js

【解决方案1】：

一种廉价的方法是让您的事件处理程序合作：

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

如果 Hammer 并不总是调用您的 transformend，那么不幸的是，您可以做的解决该错误的所有方法是使用某种计时器，如果经过一定时间，该计时器将结束您的转换。它并不完美，但它可以帮助您从 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) { ... } });

【讨论】：

解决方案的工作原理与我上面的一样。一般工作，但某些情况无法将转换设置回 false，因此拖动保持禁用...
啊，我将代码更改为使用transformstart 而不是transform。锤子中可能存在错误，有时它在transformend 之后调用transform（此更改将起作用），或者它并不总是调用transformend，这将是锤子中需要修复的错误。尝试在transformstart 和transformend 中添加一些console.log 语句，看看你是否为每个start 得到一个end。

【解决方案2】：

试试ev.gesture.stopDetect();

请参阅 Hammer 的 wiki 了解有关此的一些详细信息！ https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults

【讨论】：

【解决方案3】：

我刚刚设法修复了这个错误。

            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;
            } 

        }

这里的重要部分是，当你在做“转换”时，总是设置transforming = true;

【讨论】：