javascript - 未检测到滑动手势答案

【问题标题】：javascript - Swipe gesture not detectingjavascript - 未检测到滑动手势
【发布时间】：2017-12-05 21:51:07
【问题描述】：

我在另一个关于堆栈溢出的问题上找到了代码，我使用了相同的代码，但它不起作用。我已经在 iphone 上使用 safari 和 chrome 以及在 android 设备上使用 chrome 进行了尝试。无法弄清楚为什么事件处理程序不起作用。

手势的目的是使用 rgb 值更改背景颜色。如果您想检查，桌面版本可以工作，并且可以在 andy.serra.us 上找到。现在，我正在尝试构建移动版本。

document.body.addEventListener('touchstart', handleTouchStart(event), false);
document.body.addEventListener('touchmove', handleTouchMove(event), false);

var xDown = null;
var yDown = null;

function handleTouchStart(event) {
  if(screen && screen.width < 480 && !(document.getElementsByClassName('in')[0])) {
    xDown = event.touches[0].clientX;
    yDown = event.touches[0].clientY;
  }
};

function handleTouchMove(event) {
  if(screen && screen.width < 480 && !(document.getElementsByClassName('in')[0])) {
    if ( ! xDown || ! yDown ) {
        return;
    }
    var xUp = event.touches[0].clientX;
    var yUp = event.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
          red -= increment;
          if(red < 0) { red = 0; }
          document.getElementById("val-display").innerHTML = "Red: " + red + "<br>Green: " + green + "<br>Blue: " + blue + "<br>Hex: #" + fullColorHex(red, green, blue);
        } else {
          blue -= increment;
          if(blue < 0) { blue = 0; }
          document.getElementById("val-display").innerHTML = "Red: " + red + "<br>Green: " + green + "<br>Blue: " + blue + "<br>Hex: #" + fullColorHex(red, green, blue);
        }
    } else {
        if ( yDiff > 0 ) {
          green -= increment;
          if(green < 0) { green = 0; }
          document.getElementById("val-display").innerHTML = "Red: " + red + "<br>Green: " + green + "<br>Blue: " + blue + "<br>Hex: #" + fullColorHex(red, green, blue);
        }
    }
    setBackgroundColor();
    setTextColorFromBackground("title", false);
    setTextColorFromBackground("side_box", true);
      /* reset values */
    xDown = null;
    yDown = null;
  }
};

【问题讨论】：

标签： javascript gestures mobile-browser

【解决方案1】：

如果你想要的是一个跨平台滑动监听器，我只是在 npm 上上传了一个。它被称为 goodtap，可以处理点击、滑动、长按和外部点击，并且不需要单独的事件侦听器，因此任何生成的 html 都会自动工作。

GoodTap

【讨论】：