在泛hammer.js上获取pan方向并限制方向
在泛hammer.js上获取pan方向并限制方向
提问于 2015-03-29 19:33:15
我使用的是hammer.js库及其jQuery插件。我开始按照文档的建议使用它，所以类似于这样的东西可以在.game-card-mobile div上启动它。
/* Create Hammer object for swipable game cards */
var $gameCard = $('.game-card-mobile');
var $gameCardTouch = $gameCard.hammer();
$gameCardTouch.on("panright press panleft", function(ev) {
console.log(ev.type);
}); 这允许我将可用的操作限制在右、左和按下pan/swipe元素，但是在一个事件中，假设panright我将在控制台中打印出许多条目，尽管只执行了一个pan。于是我把印心改为：
$gameCardTouch.on("panend", function(ev) {
console.log(ev.type);
});现在它侦听在操作结束时发生的panend操作，因此在控制台中只返回一个打印输出，但是现在总是panend，因此我失去了对之前3个操作的限制，无法检测执行了什么特定操作。
有没有办法将这些组合起来，这样我就可以从panright中得到一个打印出来，如果用户向右滑动，panleft如果向左滑动并按下，只要他们完成该操作一次就可以了？
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-04-01 02:37:19
只需将panright、press和panleft与panend结合使用就可以了。
(function(){
var direction;
var $gameCard = $('.game-card-mobile');
var $gameCardTouch = $gameCard.hammer();
$gameCardTouch.on("panright press panleft", function(ev) {
//Set the direction in here
direction = ev.type;
});
$gameCardTouch.on("panend", function(ev) {
//Use the direction in here
//You know the pan has ended
//and you know which action they were taking
console.log(direction);
//So do what ever here
if(direction === "whatever") ...
});
}());Stack Overflow用户
发布于 2016-01-29 23:58:00
把杰克的话说得更清楚。也许是更简单的解决方案。
ev.eventObject返回整数值https://hammerjs.github.io/api/#event-object
就ev.direction而言：
- 无运动=0
- 左=2
- 权利=4
- 升=8
- 下降= 16
- 水平=6
- 垂直= 24
- all = 30
打扫
var mc = new Hammer(body);
mc.on("panend", function(ev) {
if (ev.direction == INT) {
//do something
}
});
漫不经心
var mc = new Hammer(body);
mc.on("panend", function(ev) {
//console.log(ev.direction);
//for left case
if (ev.direction == 2) {
//do something
}
//for right case
if (ev.direction == 4) {
//do something
}
});
Stack Overflow用户
发布于 2015-03-31 23:07:23
我在打电话，所以这只是伪代码，但你不能这样做吗：
var eventHandlers = {
panright: function(){},
press: function(){},
panleft:function(){}
}
$gameCardTouch.on("panright press panleft", function(ev) {
if(ev.type === 'panright') {
eventHandlers.panright();
} else if((ev.type === 'panleft'){
eventHandlers.panright();
} else {
eventHandlers.press();
}这个网站上的例子类似：http://codepen.io/jtangelder/pen/ABFnd
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29333815
复制相关文章
相似问题
腾讯云开发者
