javascript - 스 와이프 제스처가 감지되지 않습니다.

Question

스택 오버플로에 대한 다른 질문에서 코드를 발견했으며 동일한 코드를 사용했지만 작동하지 않습니다. 나는 사파리와 크롬을 사용하여 아이폰에서 그리고 크롬을 사용하는 안드로이드 장치에서 그것을 시도했다. 이벤트 처리기가 작동하지 않는 이유를 알아낼 수 없습니다.

제스처의 목적은 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; 
    } 
}; 

Answer 1

크로스 플랫폼 스 와이프 청취자가 원하는대로 npm에 업로드하면됩니다. goodtap이라고 불리우며 탭, 스 와이프, 길게 누르기, 외부 탭을 처리하며 생성 된 HTML이 자동으로 작동하도록 개별 이벤트 리스너가 필요하지 않습니다.

GoodTap