使用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 & am p; & this.moveX) { //左滑触发
this.getData()
}
}
this.startX = 0
this.moveX = 0
this.isTouch = false
},
这样设置后就不会影响点击事件了。一 开始 我还以为是异步问题，搞了 半 天 原来 是事件的优先级问题。
触摸事件(touchstart、touchmove和touchend)
触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候 或者 是从屏幕上移开的时候出发。
下面具体说明
touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove 事件：当手指在屏幕上滑动的时候连续地触发。 touchend 事件：当手指从屏幕上离开的时候触发。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。
touches ：表示当前跟踪的触摸操作的touch对象的数组。 t arg etTouches ：特定于事件目标的Touch对象的数组。 changeTouches ：表示自上次触摸以来发生了什么 改变 的Touch对象的数组。每个Touch对象包含的属性如下。
clientX ：触摸目标在视口中的x坐标。 clientY ：触摸目标在视口中的y坐标。 identifier ：标识触摸的唯一ID。 pageX ：触摸目标在页面中的x坐标。 pageY ：触摸目标在页面中的y坐标。 screenX ：触摸目标在屏幕中的x坐标。 screenY ：触摸目标在屏幕中的y坐标。 target ：触目的DOM节点目标。实际 的使用：
@H_441_ 126 @
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : vue长按事件和点击事件冲突的解决 vue中touch和click共存的解决方式 解决vue组件中click事件失效的问题
总结
以上是 为你收集整理的 Vue中使用touchstart、touchmove、touchend与click冲突问题 全部内容，希望文章能够帮你解决 Vue中使用touchstart、touchmove、touchend与click冲突问题 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue中使用touchstart、touchmove、touchend与click冲突问题的详细内容...