解决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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
如何编写jquery插件
Mar 29 jQuery
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 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来实现网络服务
2009/09/15 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
yii2安装详细流程
2018/05/23 PHP
载入进度条 效果
2006/07/08 Javascript
在视频前插入广告
2006/11/20 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
webpack打包js的方法
2018/03/12 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python解析html开发库pyquery使用方法
2014/02/07 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
python numpy库np.percentile用法说明
2020/06/08 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
公司司机岗位职责
2014/02/07 职场文书
文体活动实施方案
2014/03/27 职场文书
国际金融专业自荐信
2014/07/05 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
工作感言一句话
2015/08/01 职场文书