Hammer JS Tap並按移動

我正在嘗試爲移動瀏覽器構建以下內容：我有一排框。每個盒子都包含下面的其他信息和另一個網站的href。當我通過某個盒子滾動頁面或者只是敲擊它時，我想顯示附加信息。如果我點擊它，我想去href。Hammer JS Tap並按移動

我已經建有點擊，touchstart和touchend，它的工作，但相當越野車的解決方案，因爲點擊和touchstart被幹擾（我猜）。所以我希望能夠用hammer.js構建一個更堅實的版本。我的事件處理的想法：

觸摸開始：附加信息ist顯示。
如果我釋放，直到250毫秒：觸摸被計爲一個水龍頭，我發送到href。
251ms後：這是一個defenitely taphold
在滾動/觸摸移動：這是一個defenitely 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

所以我需要兩件事情。 Pressup需要觸發和Pressup我需要檢查自按是否大於或小於250ms。

它會是這樣的

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

非常感謝！

來源

2016-03-04 vinni

我的解決辦法（它結合事件的每個格在柵格）：

$('.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 
    }); 

});

來源

2016-03-05 10:43:50 vinni

Hammer JS Tap並按移動

回答

相關問題