vue 多个click_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
@touchstart.prevent="gtouchstart(XXX)"
@touchend.prevent="triggerReply(XXXX)">
{{ item.content}}
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共存的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
vue 多个click_vue中touch和click共存的解决方式相关推荐
- vue中如何解决touch和click共存的问题
在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove. ...
- 网页中默认图片的几种解决方式
原文https://segmentfault.com/a/1190000016855234 现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,在谷歌浏览器中就会显示这样 <img ...
- vue引入包mysql_vue中import引入文件和使用的方式总结
export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y ...
- Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
- Mac OS X 10.10, Eclipse+ADT真机调试代码时,Device Chooser中不显示真机的解决方式
Mac OS X 10.10的环境下.Eclipse+ADT,进行真机调试时,会出现一个问题. Device Chooser对话框里不显示真机设备,仅仅有又一次插拔数据线才干够. 经过測试.有两个暂时 ...
- 打印机打印列队中打印状态为错误的解决方式之一
右键[我的电脑(win7以上为"计算机")],点击[管理],展开[服务和应用程序],点击[服务]. 找到右侧的[print spooler]项,右键选择[停止]. win+R打开运 ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
- vue 对象里面放数组刷新问题_Vue 数组和对象更新,但是页面没有刷新的解决方式...
在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. {{item.name}} data () { return { msg: 'Welcome to Your Vue ...
- Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)
场景 在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试. 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debug ...
最新文章
- 工作小记(三)----说说北京生活的乐趣
- Java大数,高精度
- 2020-11-23(彻底理解KMP)
- 多域资源整合之基础准备--DNS配置
- 项目管理实战之团队管理 (转自:zhuweisky)
- (软件工程)用例说明模板
- js创建file对象 字符串 txt_js-创建对象的多种方式
- Apache Shiro学习笔记(七)IniWebEnvironment
- 无人驾驶插秧机智能辅助系统_北斗年会 | 智慧农业:插秧“神器”大显身手——雷科防务致力于高精度无人驾驶插秧机前装应用...
- 单片机c语言曲普两只蝴蝶,51曲谱网_51单片机简谱编码
- 第五课 基本数据类型
- 个人博客系统PHP源码 DouPHP轻博客
- 记录小米8连接电脑之后的文件位置
- 安庆集团-冲刺日志(第五天)
- 本人考研的时间流程图
- 学会感谢--谈辞职信的写法
- 【搞定CAD】你的启动界面怼到甲方爸爸了吗
- paramiko模块堡垒机
- Error when inserting or changing in a sorted table
- NOI模拟(5.19) JSOID2T3 军训列队 (bzoj5319)