移动端事件--touch事件的分类、touch事件的event对象、 其他触摸事件

一、touch事件的分类

1.1 触摸事件(touch)

         .box {
            width: 150px;
            height: 150px;
            background-color: red;
            margin: 20px auto;
        }

<div id="box" class="box"></div>

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

        // boxEl.ontouchstart = handleStart; 触摸开始
        // boxEl.ontouchmove = handleMove; 触摸移动
        // boxEl.ontouchend = handleEnd; 触摸结束
        // boxEl.ontouchcancel = handleCancel; 触摸中断

        boxEl.addEventListener('touchstart', handleStart, false);
        boxEl.addEventListener('touchmove', handleMove, false);
        boxEl.addEventListener('touchend', handleEnd, false);

        function handleStart() {
            console.log('touchstart');
        }

        function handleMove() {
            console.log('touchmove');
        }

        function handleEnd() {
            console.log('touchend');
        }
</script>

注意：

• touchstart：一定是手指摁在物体上才能触发
• touchmove、touchend：手指移出来后也能触发
• 触发顺序一定先是touchstart，然后才有可能触发touchmove，最后才触发touchend

pointer事件

1.2 手势(gesture)事件

1.3 传感器(sensor)事件

---

二、touch事件的event对象

• touches--所有的触摸点（所有的手指信息）
• targetTouches--目标触摸点（手指在目标物体上的信息，比如有几根...）
• changedTouches--发生变化的触摸点(发生变化的手指信息，比如几根手指发生了变化)

示例：

        body {
            height: 2000px;
        }
        
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            margin: 20px auto;
        }

<div id="box" class="box"></div>

        var boxEl = document.getElementById('box');

        boxEl.addEventListener('touchstart', handleStart, false);
        boxEl.addEventListener('touchmove', handleMove, false);
        boxEl.addEventListener('touchend', handleEnd, false);

        function handleStart(ev) {
            console.log('touchstart', ev);
            // console.log(ev.touches, ev.targetTouches, ev.changedTouches);
            var touch = ev.changedTouches[0]; //单指

            console.log(touch);

            console.log(touch.pageX, touch.pageY); //加上滚动条的距离
        }

        function handleMove(ev) {
            console.log('touchmove');
        }

        function handleEnd(ev) {
            console.log('touchend', ev);
            // console.log(ev.touches, ev.targetTouches, ev.changedTouches);
        }

 

---

 三、其他触摸事件

单击时触发：tap

双击时触发：doubletap

摁住不松手时触发：press

快速左/右滑时触发：swipe

拖动时触发：pan

双指收缩时触发：pinch 

多指滑动时触发：rotate

    img {
            width: 100%;
        }

<img id="box" src="img/touchEvent.png" alt="touchEvent">

 <script src="js/hammer.min.js"></script>
    <script>
        var boxEl = document.getElementById('box');

        var hammertime = new Hammer(boxEl);
        //on() 方法在被选元素及子元素上添加一个或多个事件处理程序
        //在on()方法中可以加上多种要执行的事件
        hammertime.on('pan swipe tap doubletap press pinch rotate', function(ev) {
            console.log(ev.type);
        });
    </script>

touch事件之单指拖动小案例：

          body {
            height: 2000px;
            }
        
        .backtop {
            /* 固定定位 */
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 45px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            color: #fff;
            font-size: 30px;
            /* 去除高亮 */
            -webkit-tap-highlight-color: transparent;
            /*transform: translate3d(x, y, 0); 会开启GPU加速，从而提高效率即动画的性能较高*/
        }

<a href="#" id="backtop" class="backtop">&uarr;</a>

<script>
        function drag(el, options) {
            // 判断x和y是否在外面传值，如果传值就使用传入的options.x和options.y，否则就使用默认值
            options.x = typeof options.x !== 'undefined' ? options.x : true;
            options.y = typeof options.y !== 'undefined' ? options.y : false;

            //如果禁止了x和y轴的拖动，也就没有必要再向下进行了，就在此返回
            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(ev) {
                //获取手指
                var touch = ev.changedTouches[0];

                //记录刚开始的x和y的坐标
                startPoint.x = touch.pageX;
                startPoint.y = touch.pageY;
            }

            function handleMove(ev) {
                // 阻止滚动条的默认行为
                ev.preventDefault();

                isTouchMove = true;

                //获取手指
                var touch = ev.changedTouches[0];

                //记录和刚开始的x和y坐标之差
                var diffPoint = {};

                //记录x和y分别到底移动了多少距离，便于传递给move()函数
                var movePoint = {
                    x: 0,
                    y: 0
                };

                // 计算差值
                diffPoint.x = touch.pageX - startPoint.x;
                diffPoint.y = touch.pageY - startPoint.y;

                // 如果允许x和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(ev) {
                // 如果没有移动
                if (!isTouchMove) return;

                var touch = ev.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)';
            }
        }
    </script>
    <script>
        var backtop = document.getElementById('backtop');
        drag(backtop, {
            x: true,
            y: true
                // y: true
        });
    </script>