仅在点击结束时触发 JS 函数答案

【问题标题】：Trigger JS function only when tap ends仅在点击结束时触发 JS 函数
【发布时间】：2021-10-14 17:26:55
【问题描述】：

我制作了一个在 Javascript 上运行的灯箱，我最近添加了一个功能，在移动设备上向左或向右滑动会改变出现的图像。但是，每次我的手指移动几个像素时，我使用的代码都会触发该功能。我希望该功能在我滑动一次时准确触发一次，无论滑动的长度如何。这是我当前的代码：

/* Defining plusSlides function */

function plusSlides(n) {
  showSlides(slideIndex += n);
}


/* The code for swiping */

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

var xDown = null;                                                        
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     
                                                                         
function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                
                                                                         
function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
                                                                         
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            plusSlides(1)
        } else {
            plusSlides(-1)
        }
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

【问题讨论】：

标签： javascript touchmove

【解决方案1】：

您可以使用touchend 事件并将handleTouchMove 处理程序拆分为两个处理程序（+f.e.handleTouchEnd）。为此，您需要在全局范围内定义 xDiff 和 yDiff。

/* Defining plusSlides function */

function plusSlides(n) {
  showSlides(slideIndex += n);
}


/* The code for swiping */

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);      
document.addEventListener('touchend', handleTouchEnd, false);

var xDown = null;                                                        
var yDown = null;
var xDiff = null;         // DEFINED GLOBALLY                                               
var yDiff = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     
                                                                         
function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                
                                                                         
function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

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

function handleTouchEnd() {                                                  
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            plusSlides(1)
        } else {
            plusSlides(-1)
        }
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

【讨论】：