Question

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

我已经构建了一个带有click，touchstart和touchend的解决方案，虽然有效，但很有问题，因为点击和 touchstart 正在干扰（我猜）。所以我希望用hammer.js构建一个更加可靠的版本。我对事件处理的看法：

触摸开始：显示附加信息。
如果我发布到250毫秒：触摸被视为点按，我就会被发送到href。
在251ms之后：这是一个轻而易举的
滚动/触摸移动：它确实是一个taphold

这是我到现在为止的js。我将按时间的起点更改为1ms，将阈值更改为1000px以便能够滚动。如果按，滚动，按下不会触发。我认为潘正在触发？如何更改按下的设置？

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

所以我需要做两件事。按下需要触发，然后按按下我需要检查按后的时间是否大于或小于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在移动设备上点击并按下

1 个答案: