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

Coder編程 2021-11-13

展開全文

移動端事件有哪些：

觸摸事件

手勢事件

傳感器事件

（后面兩個兼容性不怎么樣，因此重點就是觸摸事件）

觸摸事件：

touch 事件

pointer 事件

（PC端可能會使用jQuery做動畫，移動端一般不會，基本都是使用css3做動畫）

ontouchstart （必須在元素內部才能觸發(fā)）

ontouchmove （元素內外都能觸發(fā)）

ontouchend （元素內外都能觸發(fā)）

ontouchcancel 觸摸中斷，多用于系統(tǒng)級處理，比如在觸摸時突然接了個電話（一般幾乎是用不上的）

推薦使用 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" 觸發(fā)的事件

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

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

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>