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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
js闭包的9个使用场景
Dec 29 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 作用域解析运算符(::)
2010/07/27 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
JS中的多态实例详解
2017/10/15 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python实现K最近邻算法
2018/01/29 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
python中单下划线_的常见用法总结
2018/07/10 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
django框架auth模块用法实例详解
2019/12/10 Python
python简单的三元一次方程求解实例
2020/04/02 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
Delphi软件工程师试题
2013/01/29 面试题
生产总经理岗位职责
2013/12/19 职场文书
yy司仪主持词
2014/03/22 职场文书
简易离婚协议书范本
2014/10/24 职场文书
就业导师推荐信范文
2015/03/27 职场文书
单方投资意向书
2015/05/11 职场文书
小孩不笨观后感
2015/06/03 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Python 如何实现文件自动去重
2021/06/02 Python
关于python中模块和重载的问题
2021/11/02 Python