touch

touch是移动端的触摸事件，而且是一组事件

利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

touchstart

当手指触摸屏幕的时候触发

touchmove

当手指在屏幕来回的滑动时候触发

touchend

当手指离开屏幕的时候触发

touchcancel

当被迫终止滑动的时候触发（来电，弹消息）

使用

绑定事件：

window.onload = function () {
    var box = document.querySelector('.box');
    box.addEventListener('touchstart',function (e) {
        console.log('start');
        console.log(e);
    });
    box.addEventListener('touchmove',function (e) {
        console.log('move');
        console.log(e);
    });
    box.addEventListener('touchend',function (e) {
        console.log('end');
        console.log(e);
    });

}

事件对象：

TouchList———触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合

changedTouches

改变后的触摸点集合

targetTouches

当前元素的触发点集合

touches

页面上所有触发点集合

触摸点集合在每个事件触发的时候会不会去记录触摸

changedTouches 每个事件都会记录

targetTouches，touches 在离开屏幕的时候无法记录触摸点

滑动实现的原理：

就是让触摸的元素随着手指的滑动做位置的改变
位置的改变：需要当前手指的坐标
在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background: pink;
            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('start');
                // 基于浏览器窗口（视口）
                console.log(e.touches[0].clientX, e.touches[0].clientY);
                // 基于页面（视口）
                console.log(e.touches[0].pageX, e.touches[0].pageY);
                // 基于屏幕
                console.log(e.touches[0].screenX, e.touches[0].screenY);
            });
            box.addEventListener('touchmove', function (e) {
                console.log('move');
            });
            box.addEventListener('touchend', function (e) {
                console.log('end');
            });

        }
    </script>
</body>

</html>

点击指示处，发现三串结果分别不同，试着拖动浏览器窗口

发现第三组数据有很大的改变，可以发现：

clientX clientY      基于浏览器窗口（视口）
pageX   pageY        基于页面（视口）
screenX screenY      基于屏幕