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

Question

我将 touchmove 事件绑定到一个 div 上，其中有一个滑块图形，需要以某种方式计算用户上下拖动了多少像素，所以我可以调整滑块图形（真的不想为此使用任何库，因为它是唯一发生此功能的地方）。

所以我看起来像这样

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

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

Answer 1

$('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 事件。

如果您需要任何帮助来理解这一点，请告诉我！

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

on 'touchmove' event see how many pixels were dragged in vertical direction

javascript

jquery

touch