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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
JavaScript的目的分析
2007/01/05 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
深入探讨前端框架react
2015/12/09 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python实现GIF图倒放
2020/07/16 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
超市创业计划书
2014/04/24 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
Python实现双向链表
2022/05/25 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技