移動端事件（touchstart+touchmove+touchend）

時間 2020-03-16

標籤移動事件 touchstart+touchmove+touchend touchstart touchmove touchend 欄目無線简体版

原文原文鏈接

移動端事件有哪些：css

觸摸事件html

手勢事件node

傳感器事件css3

（後面兩個兼容性不怎麼樣，所以重點就是觸摸事件）web

觸摸事件：性能

touch 事件動畫

pointer 事件spa

（PC端可能會使用jQuery作動畫，移動端通常不會，基本都是使用css3作動畫）3d

ontouchstart （必須在元素內部才能觸發）code

ontouchmove （元素內外都能觸發）

ontouchend （元素內外都能觸發）

ontouchcancel 觸摸中斷，多用於系統級處理，好比在觸摸時忽然接了個電話（通常幾乎是用不上的）

推薦使用 addEventListener 來綁定事件，除非由於兼容性緣由使用 on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>touch</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background:pink;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
    </div>

    <script>
        var box=document.getElementById("box");

        // box.ontouchstart=handleStart;
        // box.ontouchmove=handleMove;
        // box.ontouchend=handleEnd;

        box.addEventListener("touchstart",handleStart,false);
        box.addEventListener("touchmove",handleMove,false);
        box.addEventListener("touchend",handleEnd,false);

        function handleStart(){
            console.log("touchstart");
        }
        function handleMove(){
            console.log("touchmove");
        }
        function handleEnd(){
            console.log("touchend");
        }
    </script>
</body>
</html>

touch事件的event對象

比較重要的屬性

type: "touchstart" 觸發的事件

target: div#box.box 觸摸的元素

changedTouches: TouchList {0: Touch, length: 1} 發生變化的觸摸點

targetTouches: TouchList 目標元素上的觸摸點

touches: TouchList {0: Touch, length: 1} 全部觸摸點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>touch</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background:pink;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
    </div>

    <script>
        var box=document.getElementById("box");

        // box.ontouchstart=handleStart;
        // box.ontouchmove=handleMove;
        // box.ontouchend=handleEnd;

        box.addEventListener("touchstart",handleStart,false);
        box.addEventListener("touchmove",handleMove,false);
        box.addEventListener("touchend",handleEnd,false);

        function handleStart(e){
            console.log("touchstart");
            console.log(e.changedTouches[0]);
        }
        function handleMove(e){
            console.log("touchmove");
            console.log(e);
        }
        function handleEnd(e){
            console.log("touchend");
            console.log(e);
        }
    </script>
</body>
</html>

clientX clientY 指視口到觸摸點的距離（不包括滾動距離）

pageX pageY 視口到觸摸點的距離（包括滾動距離）

單指拖拽案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>touch</title>
    <style>
        .backtop{
            width:90px;
            height:90px;
            position: fixed;
            bottom:20px;
            right:20px;
            line-height:90px;
            text-align: center;
            background:rgba(0,0,0,.6);
            border-radius:50%;
            color:#fff;
            font-size:60px;
            -webkit-tap-highlight-color:transparent;
            /*transform:translate3d(x,y,0);在移動端使用會開啓GPU加速，會讓動畫性能變高*/
        }
    </style>
</head>
<body>
    <a href="#" id="backtop" class="backtop">&uarr;</a>

    <script>
        function drag(el,options){
            options.x=typeof options.x!=="undefined"?options.x:true;
            options.y=typeof options.y!=="undefined"?options.y:true;

            if(!options.x&&!options.y) return;

            var curPoint={
                x:0,
                y:0
            };
            var startPoint={};
            var isTouchMove=false;

            el.addEventListener("touchstart",handleStart,false);
            el.addEventListener("touchmove",handleMove,false);
            el.addEventListener("touchend",handleEnd,false);

            function handleStart(e){
                var touch=e.changedTouches[0];
                startPoint.x=touch.pageX;
                startPoint.y=touch.pageY;
            }
            function handleMove(e){
                e.preventDefault();//阻止默認行爲（滾動條滾動）
                isTouchMove=true;

                var touch=e.changedTouches[0];
                var diffPoint={};//要移動的距離
                var movePoint={//移動以後的距離
                    x:0,
                    y:0
                };

                diffPoint.x=touch.pageX-startPoint.x;
                diffPoint.y=touch.pageY-startPoint.y;

                if(options.x){
                    movePoint.x=diffPoint.x+curPoint.x;//移動以後的距離=要移動的距離+當前距離
                }
                if(options.y){
                    movePoint.y=diffPoint.y+curPoint.y;
                }

                move(el,movePoint.x,movePoint.y);
            }
            function handleEnd(e){
                if(!isTouchMove) return;

                var touch=e.changedTouches[0];
                curPoint.x+=touch.pageX-startPoint.x;//更新當前位置
                curPoint.y+=touch.pageY-startPoint.y;

                isTouchMove=false;
            }
            function move(el,x,y){
                x=x||0;
                y=y||0;
                el.style.transform="translate3d("+x+"px,"+y+"px,0)";
            }
        }

        var backtop=document.getElementById("backtop");
        drag(backtop,{
            x:true,
            y:true
        });

    </script>
</body>
</html>