用touchstart、touchmove、touchend简陋实现左右滑动【触摸事件】

touchstart事件:当一开始触摸时所获取触发的【就算不滑动也会触发】

touchend事件：当离开触摸屏时所触发的事件

touchmove事件：当你触摸时滑动时连续发生的事件

刚开始触碰，目的要实现互动在一定的范围内滑动一个图标，超过一定的值时跳转到下一页。

要实现该效果的图标【这里我是在类里面用背景图放入我需要的图片】
```
<a href="javascript:;" class="part1-touch" id="part1-touch"></a>
```

        //获取到那张图片的节点 
        var touch = document.getElementById('part1-touch');
        //定义变量 
        var startIndex, endIndex, swiper, touchIndex, tranX, tranBack;
        //touchstart事件
        touch.addEventListener('touchstart', function(event) {
            event.preventDefault();
            var touch = event.changedTouches[0];
            console.log('start' + touch.pageX);
            startIndex = touch.pageX;//获取到刚开始的X轴上的值
        });
        //touchmove事件
        touch.addEventListener('touchmove', function(event) {
            event.preventDefault();
            touchIndex = event.changedTouches[0].pageX; //获取到移动时不断改变的X轴上的值
            tranX = touchIndex - startIndex;//移动过程中X轴上的差值
            console.log(tranX);
            // 在一定区域里面移动，这里限制在一定区域内移动，图标不超过规定的区域
            if (tranX > 50) {
                tranX = 50;
            } else if (tranX < -50) {
                tranX = -50;
            }
            //实时显示图标的位置
            $('.part1-touch').css("transform", "translateX(" + tranX + "px)");
        });
        //touchend事件 
        touch.addEventListener('touchend', function(event) {
            event.preventDefault();
            //获取最终触摸的X轴（手指离开屏幕时获取的）    
            endIndex = event.changedTouches[0].pageX;
            tranBack = endIndex - startIndex;
            console.log(tranBack);
            console.log(Math.abs(tranBack));
            //在这里同样计算差值
            if (Math.abs(tranBack) > 50) {
                $('.kv').hide();
            }
            $('.part1-touch').css("transform", "translateX(0px)");
        });

在这里我在touchmove和touchend都分别计算了差值，其实他们的差值是一样的，可是为什么我要写两个呢？在touchmove里面算的差值，我是想来控制他显示的区域，在touchend里面的差值我想用来计算是否超出要滑动的距离来触发隐藏该页面的。所以两者的用处是不一样的。然而在最下面的这句话则是实现了松开手的时候，该图标立马返回原位置。

 $('.part1-touch').css("transform", "translateX(0px)");

因为上面纯碎是个人的领悟，自身能力有限，只是写出来基于参考一下。欢迎大佬们留言说一下还有什么其他方法。

用touchstart、touchmove、touchend简陋实现左右滑动【触摸事件】

猜你喜欢