我为我的活动实施了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%的工作溶剂。请帮忙......
答案 0 :(得分:7)
这样做的一种便宜方法是让您的事件处理程序合作:
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) { ... } });
答案 1 :(得分:2)
尝试ev.gesture.stopDetect();
查看Hammer的wiki了解一些细节! https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults
答案 2 :(得分:2)
我刚刚设法解决了这个问题。
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;