解决vue的touchStart事件及click事件冲突问题


Posted in Javascript onJuly 21, 2020

一 、问题:

今天遇到这样问题,给某个元素同时绑定touchStart及click事件后,若在移动设备上,当你点击时,会依次出发这两个事件。因为移动端设备上的click事件触发是会延迟300ms,所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次,这样毫无意义。这里提醒下,PC是无法识别touch相关事件

二、解决方式

(1)preventDefault方法

通过使用preventDefault方法(阻止元素默认事件行为的发生)来解决。在touchstart中添加 e.preventDefault()就可以阻止click事件触发。

模板

<ul class="list">
 <li class="item" v-for="item of letters"
 :key="item"
 :ref="item"
 @touchstart="handleTouchStart"
 @click="handleleterClick"
 >{{item}}</li>
 </ul>

上面模板可以使用vue事件修饰符@touchstart.stop.prevent实现,但method中的handleTouchStart 就无需添加 e.preventDefault();

<ul class="list">
 <li class="item" v-for="item of letters"
 :key="item"
 :ref="item"
 @touchstart.stop.prevent="handleTouchStart"
 @click="handleleterClick"
 >{{item}}</li>
 </ul>
methods: {
 handleleterClick (e) {
  console.log('click事件执行一次')
  this.$emit('change', e.target.innerText)
 },
 handleTouchStart (e) {
  console.log('TouchStart执行一次')
  e.preventDefault()//添加阻止click事件触发
  this.touchStatus = true
 }
 }
}

未添加 e.preventDefault()前打印结果

解决vue的touchStart事件及click事件冲突问题

添加 e.preventDefault()后打印结果

解决vue的touchStart事件及click事件冲突问题

(2)判断浏览器是否支持触屏事件

通过"ontouchend" in document来判断浏览器是否支持触屏事件,若支持调用touch事件,不支持调用click事件。

<ul class="list">
 <li class="item" v-for="item of letters"
 :key="item"
 :ref="item"
 @click="handleSelfClick"
 >{{item}}</li>
 </ul>
methods: {
 handleleterClick (e) {
  console.log('click事件执行一次')
  this.$emit('change', e.target.innerText)
 },
 handleTouchStart (e) {
  console.log('TouchStart执行一次')
  this.touchStatus = true
 },
 handleSelfClick (e) {
  console.log('ontouchstart' in document)//打印是否支持touch事件。
  if ('ontouchstart' in document) {
  this.handleTouchStart(e)
  } else {
  this.handleleterClick(e)
  }
 }
 }

以上这篇解决vue的touchStart事件及click事件冲突问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 #Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 #Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 #Javascript
vue 清空input标签 中file的值操作
Jul 21 #Javascript
Vue-resource安装过程及使用方法解析
Jul 21 #Javascript
vue中destroyed方法的使用说明
Jul 21 #Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 #Javascript
You might like
PHP的FTP学习(四)
2006/10/09 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
php printf输出格式使用说明
2010/12/05 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
如何利用Fabric自动化你的任务
2016/10/20 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python执行精确的小数计算方法
2019/01/21 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
班风口号
2014/06/18 职场文书
干部考察材料范文
2014/12/24 职场文书
大学生就业意向书
2015/05/11 职场文书
学雷锋感言
2015/08/03 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书