【JavaScript】滑动屏幕的手势事件

最新推荐文章于 2024-11-23 15:32:37 发布

原创

最新推荐文章于 2024-11-23 15:32:37 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

该文章介绍了一段JavaScript代码，用于在手机端捕捉屏幕的左滑、右滑、上滑和下滑事件。通过添加touchstart和touchmove事件监听器，记录触屏开始和移动时的坐标变化，判断滑动方向，从而识别不同的滑动动作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在手机端滑动屏幕，左滑、右滑、上滑、下滑的事件怎么捕捉？下面的纯js代码可以实现：

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 ) {
        ret