Hammer JS 在手机上点击并按下

Question

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

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

触摸启动时：显示附加信息。
如果我松开直到 250 毫秒：触摸被计为点击，我被发送到 href。
251ms后：肯定是taphold
在 scrolling/touch 着法上：这绝对是一个主攻点

这就是我到目前为止的 js。我将 press 时间的起点更改为 1ms，并将阈值更改为 1000px 以便能够滚动。如果我按下并滚动，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" );
});

我已经构建了一个代码笔（或者我应该 post 在哪里进行移动测试？） 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);
     }
});

非常感谢！！

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

});

Hammer JS 在手机上点击并按下

Hammer JS Tap and Press on Mobile

javascript

html

mobile

gesture

hammer.js