手机触屏事件（jquery）

忘是亡心i 2022-03-15 08:26 332阅读 0赞

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

*  **触摸开始事件：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>