手机触屏事件（jquery）

理解移动端触屏事件：touchstart, touchmove, touchend

最新推荐文章于 2025-04-03 06:04:29 发布

原创最新推荐文章于 2025-04-03 06:04:29 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#触屏事件

js 同时被 2 个专栏收录

35 篇文章

订阅专栏

JQuery

11 篇文章

订阅专栏

本文介绍了移动端触屏事件的使用，包括touchstart（触摸开始）、touchmove（触摸移动）和touchend（触摸结束）三个主要事件。这些事件在手机或触屏设备上用于响应用户的触摸操作，而在无触屏设备上则无效。

在移动端，点击事件和悬停事件都同统一为点击事件，所以对于手机或者带有触屏的电子设备来说，触屏事件不可忽视，当然，在不可触摸的屏幕上，这写事件就没有作用了。

触摸开始事件：touchstart

当手指放在屏幕上时触发，一次性事件

触摸移动事件：touchmove

当手指在屏幕上移动时触发，连续事件

触摸结束事件 touchend

与前两者搭配使用，用于判断事件是否完成

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=300,maximum-scale=5.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机触屏事件（只对移动端有效）</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .block {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="block"></div>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>

    
    // 三个阶段   开始   移动     结束（只判断布尔值）
    var startX,startY,moveX,moveY;
    $('.block').bind('touchstart',function(e){
        console.log(e.touches);
        var touch=e.touches[0];
        startX=touch.pageX,startY=touch.pageY;
    }).bind('touchmove',function(e){
        var touch=e.touches[0];
        moveX=touch.pageX,moveY=touch.pageY;
    }).bind('touchend',function(){
        if(moveX-startX>0){
            console.log('右滑');
        }
        else{
            console.log('左滑');
        }
    })
</script>

</html>