取決於DIV

Question

的頂部或底部的一半我試圖轉換兩個「點擊」功能，進入hammer.js「龍頭」功能，而不是創造hammer.js「龍頭」作用。這個想法是，挖掘div的下半部分會做一件事 - 它應該導航到下一個div;並點擊上半部分做另一個 - 它應該導航到前面的div。

這裏工作完美的功能，無需hammer.js：

$(document).ready(function() { 
    $('.panel').click(function(e) { 
     // top 
     if ($(this).outerHeight()/2 > e.pageY - $(this).offset().top) { 
      /* do something (go to PREV div) */ 
     } 
     // bottom 
     if ($(this).outerHeight()/2 < e.pageY - $(this).offset().top) { 
      /* do something (go to NEXT div) */ 
     } 
    }); 
}); 

，這裏是在hammer.js抽頭轉換第一次嘗試：

window.addEventListener('load', function() { 
    var element = document.getElementById('container'); 
    var hammertime = Hammer(element).on('tap', function(event) { 
     alert('Tap!'); 
    }) 
}, false); 

你可以看到，我還沒有把hammer.js分成兩個獨立的功能。我已經嘗試了許多不同的變體，使用與頂層代碼中相同的計算來分割兩個活動，但它或者完全沒有響應，或者hammer.js同時激活兩個活動。

我是（在一般和JavaScript）在hammer.js一個品牌新手，不能找出如果我錯誤地混合的jquery與JavaScript，或我只是具有hammer.js困難。

我應該提一下不過，我已經成功地創建panleft和panright，活動，爲同一個站點。而我需要將「點擊」功能轉換爲「點按」功能的原因是，所有手勢都由hammer.js處理，而不是混合 - 因爲混合手勢會使站點導航過於敏感。

任何援助將不勝感激。

UPDATE：每下面的一些幫助，這裏是將計算到Tap功能的嘗試：

window.addEventListener('load', function() { 
    var element = document.getElementById('container'); 
    var hammertime = Hammer(element).on('tap', function(e) { 
     if ($('.panel').outerHeight()/2 > e.gesture.center.Y - $('.panel').offset().top) { 
       alert('Top tap!'); 
     } 
     if ($('.panel').outerHeight()/2 < e.gesture.center.Y - $('.panel').offset().top) { 
       alert('Bottom tap!'); 
     } 
    }) 
}, false); 

即使使用e.gesture.center.Y作爲e.pageY-更換 - 但無濟於事。我仍然不能得到這個工作...

Answer 1

我已經得到現在這樣的工作：

var element = document.getElementById('panel'); 

$(element).hammer().on('tap', function(e) { 
    if ($('#panel').outerHeight()/2 > e.gesture.center.pageY - $('#panel').offset().top) { 
     alert('Top tap!'); 
    } 
    if ($('#panel').outerHeight()/2 < e.gesture.center.pageY - $('#panel').offset().top) { 
     alert('Bottom tap!'); 
    } 
}); 

但只有在hammer.js V1.0.5。我已經開闢了一個新的問題，需要改變什麼才能在v2.x中工作。