用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简陋实现左右滑动【触摸事件】相关推荐

touchstart ,touchmove, touchend 页面随手指滑动
<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><s ...
移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
移动端事件（touchstart+touchmove+touchend）
移动端事件有哪些: 触摸事件手势事件传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
关于touch事件的使用（touchStart touchMove touchEnd（不触发 android 4.0以上））滑动的使用
最近在移动端使用touch事件的时候,遇到了一些问题 ,下面是一些心得, 手机端经常会有有一些上拉加载,下拉刷新, 左右滑动删除的应用场景, 在不借助第三方插件的时候,无疑会用到touch事件,在谷歌 ...
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
Vue 绑定使用 touchstart touchmove touchend
今天要做一个页面div长按后触发事件,简单学习后实现如下: 先看代码: <template><div><div class="test" @touch ...

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

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

最新文章

热门文章