vue中touch和click共存的解决方式

更新时间：2020年07月28日 09:28:51 作者：inticaler

这篇文章主要介绍了vue中touch和click共存的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

在vue开发手机端项目时，我们经常会遇到touch和click共存的情况，比如城市选择页面的字母滑动

touch事件在手机端会触发浏览器滑动，所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上，会影响到click事件的发生。

touch事件和click事件发生先后顺序：

touchstart，touchmove，touchend，click

补充知识：touchstart与click同时触发

产生冲突的原因

我们可以给某个元素同时绑定 touchstart 和 click 事件，但这将会导致本篇文章解决的问题 – 这两个事件在移动设备上会发生冲突。

由于移动设备能够同时识别 touchstart 和 click 事件，因此当用户点击目标元素时，绑定在目标元素上的 touchstart 事件与 click 事件（约300ms后）会依次被触发，也就是说，我们所绑定的回调函数会被执行两次！。这显然不是我们想要的结果。

解决方案

(1)原生JS

方法一：

使用事件对象中的 preventDefault 方法,preventDefault 方法的作用在于：阻止元素默认事件行为的发生，但有意思的是，当我们在目标元素同时绑定 touchstart 和 click 事件时，在 touchstart 事件回调函数中使用该方法，可以阻止后续 click 事件的发生。

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 e.preventDefault()
 console.log("touchstart event!")
})
 
Button.addEventListener("click", e => {
 e.preventDefault()
 console.log("click event!")
})

方法二：

基于功能检测绑定事件

我们可以通过判断浏览器是否支持 touchstart 事件来封装元素的点击事件，这样客户端会根据当前环境判定元素应该绑定的事件类型，代码如下：

const Button = document.getElementById("targetButton")
const clickEvent = (function() {
 if ('ontouchstart' in document.documentElement === true)
 return 'touchstart';
 else
 return 'click';
})();
 
Button.addEventListener(clickEvent, e => {
 console.log("things happened!")
})

(2) VUE解决方案：

HTML

  <div class="comment-text" 
   @touchstart.prevent="gtouchstart(XXX)"
   @touchend.prevent="triggerReply(XXXX)">
   {{ item.content}}
 </div>

 data: function () {
  return {
     Loop: 0
   };
 }

  gtouchstart: function (XXXX) {
    let self = this;
    //执行长按的内容
    self.Loop = setTimeout(function () {
      self.Loop = 0;
      //XXXXXXXXXXXXXXX
    }, 500);
    return false;
  },
  triggerReply: function (XXXX) {
    let self = this;
    clearTimeout(self.Loop);
    //这里click内容
    if (self.Loop !== 0) {
       //XXXXXXXXXXXXXXX
    }
    return false;
  },

添加 touchstart.prevent，组织click事件。

点击事件顺序

点击事件可以分解成多个事件

在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click

以上这篇vue中touch和click共存的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue图片裁剪组件实例代码
这篇文章主要给大家介绍了关于Vue图片裁剪组件的相关资料,本文介绍的组件是基于vue-cropper二次封装,vue-cropper大家应该都很熟悉了吧,需要的朋友可以参考下
2021-07-07
VUE项目中封装Echart折线图的方法
这篇文章主要为大家详细介绍了VUE项目中封装Echart折线图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Mixin混入分发Vue组件可复用功能基础示例
这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue.js+element-ui动态配置菜单的实例
今天小编就为大家分享一篇vue.js+element-ui动态配置菜单的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3样式渗透之deep()为什么无效详解
项目开发中因为ui设计常常需要修改vue常用的组件库（element,antD等等）,这就需要用到样式穿透,下面这篇文章主要给大家介绍了关于Vue3样式渗透之deep()为什么无效的相关资料,需要的朋友可以参考下
2022-11-11
Vue实现PopupWindow组件详解
这篇文章主要为大家详细介绍了Vue实现PopupWindow组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
Vue关闭当前页面的方法
Vue中关闭当前页面的方法与原生JavaScript类似,都是通过window对象的close方法实现,这篇文章主要介绍了Vue关闭当前页面的方法,需要的朋友可以参考下
2023-09-09
vant-list组件触发多次onload事件导致数据乱序的解决方案
这篇文章主要介绍了vant-list组件触发多次onload事件导致数据乱序的解决方案
2023-01-01
让你30分钟快速掌握vue3教程
这篇文章主要介绍了让你30分钟快速掌握vue3，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
vue-cil之axios的二次封装与proxy反向代理使用说明
这篇文章主要介绍了vue-cil之axios的二次封装与proxy反向代理使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04