锤击JS点击并按手机

Hammer JS Tap and Press on Mobile

本文关键字：手机 JS 锤击      更新时间：2023-09-26

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

我已经构建了一个带有click，touchstart和touchend的解决方案，它有效，但非常有问题，因为点击和触摸开始会干扰（我猜）。所以我希望用锤子.js构建一个更可靠的版本。我对事件处理的想法：

  • 触摸启动时：显示的附加信息。
  • 如果我在 250 毫秒之前释放：触摸被计为点击，我被发送到 href。
  • 251 毫秒后：它无疑是一个水龙头
  • 在滚动/触摸移动时：它无疑是一个点击

这就是我到目前为止拥有的js。我将按下时间的起点更改为 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" );
});

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

多谢！！

我的解决方案（它将事件绑定到网格中的每个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
    });
});
相关文章：