在'touchmove'事件中查看在垂直方向上拖动了多少像素

时间:2015-07-31 09:40:58

标签: javascript jquery touch

我将touchmove事件绑定到一个包含滑块图形的div,并且需要以某种方式计算用户上下拖动的像素数,因此我可以调整滑块图形(实际上我不想使用任何库) ,因为它是唯一发生此功能的地方)。

所以我看起来像这样

$('div').bind('touchmove', function(e) {
  e.preventDefault();

  // See direction where users drag.
  var pix = //how many pixels draged up or down
});

1 个答案:

答案 0 :(得分:3)

$('div').on('touchstart', function(e) {
    var touchStart = e.touches[0].clientY;
    var touchDistance = 0;

    function touchMove(e) {
        touchDistance = e.touches[0].clientY - touchStart;
    }
    $(this).on('touchmove', touchMove).one('touchend', function() {
        $(this).off('touchmove', touchMove);
    });
});

这只适用于一次触摸!

它的工作原理是获取初始触摸位置,然后使用它来移动手指时获得偏移。

你必须在这里小心你的事件监听器,否则你最终会遇到大量的事件监听器和内存泄漏 - 所以不要忘记解开touchmove事件的时候触摸结束。

如果您需要任何帮助,请与我联系!