移动端事件touchstart+touchmove+touchend

移动端事件有哪些：

触摸事件

手势事件

传感器事件

（后面两个兼容性不怎么样，因此重点就是触摸事件）

触摸事件：

touch 事件

pointer 事件

（PC端可能会使用jQuery做动画，移动端一般不会，基本都是使用css3做动画）

ontouchstart （必须在元素内部才能触发）

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,1)">);
        box.addEventListener("touchend",handleEnd,1)">function handleStart(){
            console.log("touchstart");
        }
         handleMove(){
            console.log("touchmove" 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</style>
        .box{
            width:200px;
            height
            backgroundpink
            margin20px auto;
        }
    bodydiv class="box" id="box"div>

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

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

        box.addEventListener(touchstart,false);
        box.addEventListener(touchmovetouchendfunction handleStart(e){
            console.log();
            console.log(e.changedTouches[0]);
        }
         handleMove(e){
            console.log();
            console.log(e);
        }
         handleEnd(e){
            console.log();
            console.log(e);
        }
    html>

clientX clientY 指视口到触摸点的距离（不包括滚动距离）

pageX pageY 视口到触摸点的距离（包括滚动距离）

单指拖拽案例：


        .backtop90px
            position fixed
            bottom20px
            right
            line-height
            text-align centerrgba(0,.6)
            border-radius50%
            color#fff
            font-size60px
            -webkit-tap-highlight-colortransparent;
            /*transform:translate3d(x,y,0);在移动端使用会开启GPU加速，会让动画性能变高*/
        a href="#"="backtop" class="backtop">&uarr;a drag(el,options){
            options.xtypeof options.x!==undefined?options.x:true;
            options.y options.yoptions.y:;

            if(!options.x&&!options.y) return curPoint{
                x:
            };
             startPoint{};
             isTouchMove;

            el.addEventListener();
            el.addEventListener();

             handleStart(e){
                 touche.changedTouches[];
                startPoint.xtouch.pageX;
                startPoint.ytouch.pageY;
            }
             handleMove(e){
                e.preventDefault();阻止默认行为（滚动条滚动）
                isTouchMove;

                ];
                 diffPoint{};要移动的距离
                 movePoint移动之后的距离
                    x:
                };

                diffPoint.xtouch.pageX-startPoint.x;
                diffPoint.ytouch.pageYstartPoint.y;

                (options.x){
                    movePoint.xdiffPoint.x+curPoint.x;移动之后的距离=要移动的距离+当前距离
                }
                (options.y){
                    movePoint.ydiffPoint.ycurPoint.y;
                }

                move(el,movePoint.x,movePoint.y);
            }
             handleEnd(e){
                isTouchMove) ];
                curPoint.x+=startPoint.x;更新当前位置
                curPoint.ystartPoint.y;

                isTouchMove;
            }
             move(el,x,y){
                xx||;
                yy;
                el.style.transformtranslate3d(px,0);
            }
        }

         backtopbacktop);
        drag(backtop,{
            x:
        });

    >

移动端事件touchstart+touchmove+touchend

相关文章