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


Posted in Javascript onJuly 28, 2020

在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>

JS

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共存的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 #Javascript
JavaScript中window和document用法详解
Jul 28 #Javascript
vue中echarts引入中国地图的案例
Jul 28 #Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 #Javascript
JavaScript文档加载模式以及元素获取
Jul 28 #Javascript
javascript实现贪吃蛇小游戏
Jul 28 #Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 #Javascript
You might like
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php 团购折扣计算公式
2011/11/24 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php中关于换行的实例写法
2019/09/26 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python查看微信好友是否删除自己
2016/12/19 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
物流合作计划书
2014/01/10 职场文书
小学教师师德反思
2014/02/03 职场文书
私人委托书格式
2014/09/10 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2014年化验员工作总结
2014/11/18 职场文书
学生评语集锦
2015/01/04 职场文书
学生检讨书怎么写
2015/05/07 职场文书