移動端touch觸摸事件（滑動效果和手勢操做）

時間 2019-11-12

標籤移動 touch 觸摸事件滑動效果手勢欄目無線简体版

原文原文鏈接

1、定義

①touch是移動端的觸摸事件，並且是一組事件，主要有如下事件：html

touchstart 事件：當手指觸摸屏幕的時候觸發
touchmove 事件：當手指在屏幕來回滑動的時候觸發
touchend 事件：當手指離開屏幕的時候觸發
touchcancel事件：當被終止滑動的時候觸發（來電、彈消息）

②利用touch相關事件能夠實現移動端常見的滑動效果和移動端常見的手勢事件，比較經常使用的事件主要是touchstart、touchmove、touchend，而且通常是使用addEventListener綁定事件dom

            dom.addEventListener('touchstart',function(){

            });
            dom.addEventListener('touchmove',function(){
                
            });
            dom.addEventListener('touchend',function(){
                
            });

2、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch事件</title>
    <style>
        .body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;background: #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        window.onload=function(){
            var box=document.querySelector('.box');
            box.addEventListener('touchstart',function(){
                console.log('start')
            });
            box.addEventListener('touchmove',function(){
                console.log('move')
            });
            box.addEventListener('touchend',function(){
                console.log('end')
            });
        }
    </script>
</body>
</html>

3、事件對象event

4、分析移動端滑動實現的原理

①讓觸摸的元素隨着手指的滑動作位置的改變函數

②位置的改變，須要當前的座標，當前手指的座標和移動後的座標均可以在事件對象中拿到ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch事件</title>
    <style>
        .body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;background: #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        window.onload=function(){
            var box=document.querySelector('.box');
            box.addEventListener('touchstart',function(e){
                console.log('開始座標('+e.touches[0].clientX+','+e.touches[0].clientY+')');
            });
            box.addEventListener('touchmove',function(e){
                console.log('移動的座標('+e.touches[0].clientX+','+e.touches[0].clientY+')');
            });
            box.addEventListener('touchend',function(e){
                console.log('結束的座標不會記錄');
            });
        }
    </script>
</body>
</html>

5、移動端的手勢事件（實現左滑手勢和右滑手勢的原理）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手勢事件的實現</title>
    <style>
        .body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;background: #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        window.onload=function(){
            // 封裝手勢的函數
            var bindSwipeEvent=function(dom,rightCallback,leftCallback){
                // 手勢實現的條件:滑動而且滑動距離大於50px
                var isMove=false;
                var startX=0;
                var distanceX=0;
                dom.addEventListener('touchstart',function(e){
                    startX=e.touches[0].clientX;
                });
                dom.addEventListener('touchmove',function(e){
                    isMove=true;
                    var moveX=e.touches[0].clientX;
                    distanceX=moveX-startX;
                });
                dom.addEventListener('touchend',function(e){
                    // 滑動結束
                    if(isMove && Math.abs(distanceX)>50){
                        if(distanceX>0){
                            rightCallback && rightCallback.call(this,e);
                        }else{
                            leftCallback && leftCallback.call(this,e);
                        }
                    }
                    // 重置參數
                    isMove=false;
                    startX=0;
                    distanceX=0;
                });
            };
            // 調用
            bindSwipeEvent(document.querySelector('.box'),function(e){
                console.log('左滑手勢');
            },function(e){
                console.log('右滑手勢');
            })
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。