Hammer JS Tap and Press on Mobile

Question

Я пытаюсь создать следующее для мобильных браузеров: у меня есть ряд ящиков. Каждая ячейка содержит дополнительную информацию внизу и href на другом веб-сайте. Когда я просматриваю страницу через определенное поле или просто нажимаю ее, я хочу показать дополнительную информацию. Если я коснусь его, я хочу пойти в href.

Я построил решение с щелчком, touchstart и touchend, который работал, но вполне глючит, потому что нажмите и touchstart вмешиваются (я думаю). Поэтому я надеюсь построить более твердую версию с hammer.js. Моя идея управления событиями:

• При прикосновении: приведена дополнительная информация.
• Если я освобожу до 250 мс: Прикосновение подсчитывается как кран, и меня отправляют в href.
• После 251ms: Это defenitely taphold
• при прокрутке/сенсорным ходу: Это defenitely taphold

В этом нет в JS У меня есть до сих пор. Я изменил начальную точку , нажав, до 1 мс, а порог - 1000 пикселей для прокрутки. нажим не срабатывает, если я нажимаю и прокручиваю. Я думаю, что pan запускается вместо этого? Как изменить настройки нажатия?

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 Мне нужно проверить, не осталось ли с пресса больше или меньше 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 
    }); 

});