Javascript touchmove 事件只能水平滚动而不是垂直

Question

function ontouch(el, callback) {

    var touchsurface = el, // get element for scrollLeft
        startX, // get start horizontal position
        startY, // get start vertical position
        distX, // get horizontal distance
        distY, // get vertical distance
        positionX,
        newPositionX;

    touchsurface.addEventListener("touchstart", function(e) {

    e.preventDefault();

        var touchobj = e.changedTouches[0];

        positionX = -touchsurface.scrollLeft; // get current position scrollLeft element
        startX = touchobj.pageX;
        startY = touchobj.pageY;

    });

    touchsurface.addEventListener("touchmove", function(e) {

        var touchobj = e.changedTouches[0];

        distX = touchobj.pageX - startX;
        distY = touchobj.pageY - startY;

        if (Math.abs(distX) > Math.abs(distY)) {

        e.preventDefault();

        newPositionX = positionX + distX;
        touchsurface.scrollLeft = -newPositionX; // move element to left via touchMove event (i'm using negative, so it's like mobile app behavior

        }
        else{ // else consider this a vertical movement
            return false; // it's not working here
        }

});

所以，当我向左或右滑动时，它在移动，因为我使用了scrollLeft。但是，如果我向向上 或向下 滑动到这个元素，它根本不会触发任何东西，它只是堆叠在那个位置(卡住)。我的问题是，我希望 ontouch 功能仅在水平左右滑动时起作用，而不是上下滑动。

所以，如果有人向上或向下滑动到这个元素，我想要什么，它就像正常行为，也就是 scrollTop 文档。

如何让这些东西工作？

我的代码有什么问题？谢谢..

Answer 1

旧帖子，但也许对其他人有帮助。有同样的问题并通过忽略 mouseMove 解决了它:

var element = $("#cards_stream").children(":first");
var elementIdToSelect = element.attr('id');

targetElement = document.getElementById(elementIdToSelect);

var touchStartCoords =  {'x':-1, 'y':-1}, // X and Y coordinates on mousedown or touchstart events.
    touchEndCoords = {'x':-1, 'y':-1},// X and Y coordinates on mouseup or touchend events.
    direction = 'undefined',// Swipe direction
    minDistanceXAxis = 30,// Min distance on mousemove or touchmove on the X axis
    maxDistanceYAxis = 30,// Max distance on mousemove or touchmove on the Y axis
    maxAllowedTime = 1000,// Max allowed time between swipeStart and swipeEnd
    startTime = 0,// Time on swipeStart
    elapsedTime = 0,// Elapsed time between swipeStart and swipeEnd
    targetElement = document.getElementById(elementIdToSelect);// Element to delegate

function swipeStart(e) {
  e = e ? e : window.event;
  e = ('changedTouches' in e)?e.changedTouches[0] : e;
  touchStartCoords = {'x':e.pageX, 'y':e.pageY};
  startTime = new Date().getTime();
}

function swipeEnd(e) {
  e = e ? e : window.event;
  e = ('changedTouches' in e)?e.changedTouches[0] : e;
  touchEndCoords = {'x':e.pageX - touchStartCoords.x, 'y':e.pageY - touchStartCoords.y};
  elapsedTime = new Date().getTime() - startTime;
  if (elapsedTime <= maxAllowedTime){
    if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
      direction = (touchEndCoords.x < 0)? 'left' : 'right';
      switch(direction){
        case 'left':
          targetElement.textContent = "Left swipe detected";
          break;
        case 'right':
          targetElement.textContent = "Right swipe detected";
          break;
      }

    }
  }
}

function addMultipleListeners(el, s, fn) {
  var evts = s.split(' ');
  for (var i=0, iLen=evts.length; i<iLen; i++) {
    el.addEventListener(evts[i], fn, false);
  }
}

addMultipleListeners(targetElement, 'mousedown touchstart', swipeStart);
addMultipleListeners(targetElement, 'mouseup touchend', swipeEnd);