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时遇到了困难。

但是，我应该提一下，我已成功为同一网站创建了panleft和panright活动。而我需要将“点击”功能转换为“点按”功能的原因是，所有手势都由hammer.js处理，而不是混合 - 因为混合手势使网站导航过于敏感。 / p>

非常感谢任何协助。

更新：根据下面的一些帮助，这里是尝试将计算结合到点击功能中：

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中工作的新问题。

根据div的上半部分或下半部分创建hammer.js“tap”功能

1 个答案: