解决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 相关文章推荐
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JS使用数组实现的队列功能示例
Mar 04 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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/06/29 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php开发工具有哪五款
2015/11/09 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
jQuery hover 延时器实现代码
2011/03/12 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
python实现xml转json文件的示例代码
2020/12/30 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
大学生创业计划书的范文
2014/01/07 职场文书
财务管理专业求职信
2014/06/11 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书