Hammer JS 在移动设备上点击并按下答案

【问题标题】：Hammer JS Tap and Press on MobileHammer JS 在移动设备上点击并按下
【发布时间】：2016-03-04 21:31:58
【问题描述】：

我正在尝试为移动浏览器构建以下内容：我有一排盒子。每个框都包含下面的附加信息和另一个网站的href。当我通过某个框滚动页面或只是点击它时，我想显示附加信息。如果我点击它，我想去href。

我已经用 click、touchstart 和 touchend 构建了一个解决方案，它可以工作，但有很多问题，因为 click 和 touchstart 会干扰（我猜）。所以我希望用hammer.js 构建一个更可靠的版本。我对事件处理的想法：

在触摸开始时：显示附加信息。
如果我在 250 毫秒前释放：触摸被计为一次点击，我将被发送到 href。
251 毫秒后：这绝对是一个水龙头
在滚动/触摸移动时：这绝对是一个水龙头

这就是我到现在为止的js。我将 press 时间的起点更改为 1 毫秒，将阈值更改为 1000 像素，以便能够滚动。如果我按下并滚动，pressup 不会触发。我认为 pan 正在触发？如何更改 pressup 的设置？

var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);

mc.add(new Hammer.Press({
    event: 'press',
    pointer: 1,
    threshold: 1000,
    time: 1,
}));

mc.on('press', function(event) {
  $('.skills').addClass( "show" );
});

mc.on('pressup', function(event) {
$('.skills').removeClass( "show" );
});

我已经构建了一个 codepen（或者我应该在哪里发布它以进行移动测试？） http://codepen.io/Vin-ni/pen/JXYMXm

所以我需要做两件事。 Pressup 需要触发，并且在 Pressup 上我需要检查自 press 以来的时间是否大于或小于 250 毫秒。

应该是这样的

mc.on('pressup', function(event) {
$('.skills').removeClass( "show" );
     if (time since press < 251ms) {
     window.location.href = (this).data(link);
     }
});

非常感谢！！

【问题讨论】：

标签： javascript html mobile gesture hammer.js

【解决方案1】：

我的解决方案（它将事件绑定到网格中的每个 div）：

$('.class').each(function(){
    var $this = $(this);
    var mc = new Hammer.Manager(this);

    mc.add( new Hammer.Tap() );

    //customize Press event to trigger instantly + 1000px scrollable
    mc.add(new Hammer.Press({
        event: 'press',
        pointer: 1,
        threshold: 1000,
        time: 1,
    }));


    mc.on('press tap', function(event) {
        //do stuff
        if (event.type == "tap") {
            window.location.href = link;
            $('.skills').removeClass( "show" );
        }   
    });

    mc.on('pressup', function(event) {
    //undo stuff
    });

});

【讨论】：