Vue中使用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设为trueif (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 = 0this.moveX = 0this.isTouch = false},
这样设置后就不会影响点击事件了。一开始我还以为是异步问题,搞了半天原来是事件的优先级问题。哎,先记下来,写成文章记住它。
Vue中使用touchstart、touchmove、touchend与click冲突相关推荐
- Vue 绑定使用 touchstart touchmove touchend
今天要做一个页面div长按后触发事件,简单学习后实现如下: 先看代码: <template><div><div class="test" @touch ...
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- 移动端事件touchstart touchmove touchend 动画事件 过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击 移动端的三个事件 ...
- JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
- 移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
- 关于touch事件的使用 (touchStart touchMove touchEnd(不触发 android 4.0以上)) 滑动的使用
最近在移动端使用touch事件的时候,遇到了一些问题 ,下面是一些心得, 手机端经常会有有一些上拉加载,下拉刷新, 左右滑动删除的应用场景, 在不借助第三方插件的时候,无疑会用到touch事件,在谷歌 ...
- touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
- 移动端事件(touchstart+touchmove+touchend)
移动端事件有哪些: 触摸事件 手势事件 传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
- touchstart ,touchmove, touchend 页面随手指滑动
<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><s ...
最新文章
- qchart 图表_Qt下绘制图表——QtCharts版
- 中国程序员如何升职加薪,也许我们该学学印度人
- 自动批量修改linux用户密码
- oracle巡检 博客,自己总结了一下巡检的工作 for Oracle RAC
- IntelliJ IDEA 运行 Maven 项目
- MS SQL 模仿ORACLE的DESC
- innobackupex远程备份脚本
- SQL Server数据库-限制返回行数
- loadRunner目录分析二
- 今天写了一个含配置文件的 文件分割 及 合并 的java程序。
- 苹果推出新款iPad Air和iPad mini,升级A12处理器
- 蔚来2018年平均每天亏掉2641万,车辆交付预期环比腰斩
- 测绘计算机编程在在道路中的应用,CASIO系列编程计算器在公路测量中的应用.doc...
- spark mlib入门
- PHP远程操纵Wordpress的方法(流程剖析)
- 那些唱衰智能电视的砖家们可以闭嘴了
- .net xml转json
- ps文件怎么导出html文件,PS存储到网页格式的最佳方式
- oracle 日期格式筛选,oracle 日期格式怎么筛选
- 罗马数字与阿拉伯数字的相互转换