我要评论使用touchstart、touchmove、touchend与click冲突
今天做项目，突然发现了这个问题。就是在移动端，一个元素既注册有滑动事件，又注册有点击事件时就会出现一些问题。
比如我就不知道滑动事件的优先级是大于点击事件的，而当我们只想执行点击事件而不想触发滑动时间时，就必须做个处理
事件执行顺序
touchstart →touchmove →touchend→click
所以当我们执行点击事件时，其实在执行点击事件之前，就已经执行了滑动事件了。如果滑动事件的逻辑和点击事件的逻辑不一样，这样就会出现问题。
上网找了很久终于找到一个方法，就是通过活动距离来判断，当滑动距离大于自己设定的距离时，就执行滑动事件，否则就不执行。
touchstart (e) {
this.startx = e.touches[0].clientx
},
touchmove (e) {
this.movex = e.touches[0].clientx
// 如果有滑动距离，则将istouch设为true
if (this.movex) {
this.istouch = true
}
},
touchend () {
if (this.istouch) {
if (this.startx - this.movex < -50 && this.movex) { // 右滑触发
this.getdata()
} else if (this.startx - this.movex > 50 && this.movex) { //左滑触发
this.getdata()
}
}
this.startx = 0
this.movex = 0
this.istouch = false
},
这样设置后就不会影响点击事件了。一开始我还以为是异步问题，搞了半天原来是事件的优先级问题。
触摸事件(touchstart、touchmove和touchend)
触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。
下面具体说明
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。touchend事件：当手指从屏幕上离开的时候触发。
除了常见的dom属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。
touches：表示当前跟踪的触摸操作的touch对象的数组。targettouches：特定于事件目标的touch对象的数组。changetouches：表示自上次触摸以来发生了什么改变的touch对象的数组。
每个touch对象包含的属性如下。
clientx：触摸目标在视口中的x坐标。clienty：触摸目标在视口中的y坐标。identifier：标识触摸的唯一id。pagex：触摸目标在页面中的x坐标。pagey：触摸目标在页面中的y坐标。screenx：触摸目标在屏幕中的x坐标。screeny：触摸目标在屏幕中的y坐标。target：触目的dom节点目标。
实际 的使用：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论