手势事件

会听过什么左滑喜欢，右滑不喜欢，那么这样的滑动手势如何实现，在此用touch事件来实现左右滑动的判断

左右滑动

<!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 () {
            /*1. 理解移动端的手势事件*/
            /*2. swipe swipeLeft  swipeRight swipeUp swipeDown */
            /*3. 左滑和右滑手势怎么实现*/

            // 定义滑动手势函数
            var bindSwipeEvent = function (dom, leftCallback, rightCallback) {
                /*手势的条件*/
                /*1.必须滑动过*/
                /*2.滑动的距离50px*/
                var isMove = false; // 滑动状态
                var startX = 0; // 起始横坐标
                var distanceX = 0; // 滑动距离
                dom.addEventListener('touchstart', function (e) {
                    startX = e.touches[0].clientX;
                });
                dom.addEventListener('touchmove', function (e) {
                    isMove = true;
                    var moveX = e.touches[0].clientX;
                    distanceX = moveX - startX;
                });
                dom.addEventListener('touchend', function (e) {
                    /*滑动结束*/
                    // 滑动距离必须大于50px
                    if (isMove && Math.abs(distanceX) > 50) {
                        // 判断左右滑动
                        if (distanceX > 0) {
                            // 前面判断是否有传方法，后面是调用(先得确保有传)
                            rightCallback && rightCallback.call(this, e); // call里面传参，传多少惨自定义
                        } else {
                            leftCallback && leftCallback.call(this, e);
                        }
                    }
                    /*重置参数*/
                    isMove = false;
                    startX = 0;
                    distanceX = 0;
                });
            }
            // 调用滑动手势函数
            bindSwipeEvent(document.querySelector('.box'),
                function (e) {
                    console.log(e);
                    console.log('左滑手势');
                },
                function (e) {
                    console.log(e);
                    console.log('右滑手势');
                });

        }
    </script>
</body>

</html>

注意：

rightCallback && rightCallback.call(this, e);
前面一个表示判断是否有传入该方法，后面表示调用，但是必须先确保有传入，才能调用