Создайте функцию hammer.js «tap» в зависимости от верхней или нижней половины div

Question

Я пытаюсь преобразовать две функции «щелчка», вместо этого, в функции hammer.js «tap». идея заключается в том, что нажатие нижней половины 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 одновременно активирует обе операции.

Я новичок новичков на hammer.js (и вообще javascript) и не могу понять, ошибочно ли я смешиваю jquery с javascript или просто испытываю трудности с hammer.js.

Я должен упомянуть, однако, что я успешно создал панорамы и панорамы для одного и того же сайта. и причина, по которой мне нужно преобразовать функцию «щелчок» в функцию «нажмите», так это то, что все жесты обрабатываются с помощью 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.