解决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获取url参数值的两种方式
Sep 10 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
实例浅析js的this
Dec 11 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 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实现WEB动态网页静态
2006/10/09 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
php封装的smarty类完整实例
2016/10/19 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
关于Python的一些学习总结
2018/05/25 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python实现感知机模型的示例
2020/09/30 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
临床护士自荐信
2014/01/31 职场文书
揠苗助长教学反思
2014/02/04 职场文书
感恩节活动策划方案
2014/05/16 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
简历自我评价范文
2019/04/24 职场文书
Golang 对es的操作实例
2022/04/20 Golang