位置: IT常识 - 正文

处理vue中的长按事件、点击事件、默认事件冲突(vue点击按钮显示对应的内容)

编辑:rootadmin
处理vue中的长按事件、点击事件、默认事件冲突 写在前面

示例是h5项目。技术栈:vue + vant + nuxt。

知识点简介:

touchstart: // 手指放到屏幕上时触发

touchend: // 手指离开屏幕时触发

touchmove: // 手指在屏幕上滑动式触发

touchcancel: // 系统取消touch事件的时候触发

页面及需求:

推荐整理分享处理vue中的长按事件、点击事件、默认事件冲突(vue点击按钮显示对应的内容),希望有所帮助,仅作参考,欢迎阅读内容。

处理vue中的长按事件、点击事件、默认事件冲突(vue点击按钮显示对应的内容)

文章相关热门搜索词:vue按钮失效,vue长按删除,vue手动触发change,vue解决按钮重复点击,vue点击按钮显示对应的内容,vue解决按钮重复点击,vue按键事件,vue监听长按事件,内容如对您有帮助,希望把文章链接给更多的朋友!

历史搜索功能:

单击某条历史记录,把历史内容填入搜索框;长按某条历史记录:删除;代码:html:<div v-for="item in historyList" :key="item" class="disease-tag" @touchstart.prevent="delHistory($event,'deleteItem', item)" @touchend.prevent="touchend"> {{ item }}</div>data:longTouch: false, // 判断是否是长按; touchstart触发的事件:// 模拟长按clearTimeout(this.loop)// 再次清空定时器,防止重复注册定时器(会把点击事件也阻止掉)this.longTouch = false // 关键this.loop = setTimeout(() => { this.longTouch = true // 关键 this.showDialog = true}, 600)触屏离开的事件:touchend() { clearTimeout(this.loop) // 清空定时器,防止重复注册定时器 if(!this.longTouch){ //如果不是长按,执行点击事件 this.change(this.curItem) }},为何要这样写:

div上同时有点击和长按两种事件。

因为vue并没有自带长按事件,我们是通过touchstart和touchend模拟长按,但是长按后又会触发默认事件,比如出现菜单,移动端会出现选择复制;

但是如果直接阻止掉默认事件,click事件也会被阻止掉——无论是直接用@touchstart.prevent的方式阻止,还是在代码中通过event.preventDefault方式阻止;

那么如何才能做到——既阻止默认事件,又正确触发click事件呢?

利用touchstart是在click事件之前触发的特点,结合定时器来解决。

关于这个特点,我们可以简单地打印看一下:

同时绑定这三个事件:

<div v-for="item in historyList" :key="item" @click="click" @touchstart="touchstart" @touchend="touchend" </div>

打印一下执行顺序:

点击:

长按:

所以完全可以用touchstart来模拟点击事件。

本文链接地址:https://www.jiuchutong.com/zhishi/298460.html 转载请保留说明!

上一篇:Python一点通: ‘python -m pip install’ 和 ‘pip install‘ 什么区别?(python一点都不简单)

下一篇:【node进阶】在node.js中优雅的使用Socket.IO模块(node-)

  • 股权置换税收
  • 企业纳税申报表包括哪些表
  • 涉及免所得税及减半所得税的业务如何做账
  • 已经缴纳的税款怎么做账
  • 季末资产总额的计算
  • 制作费发票明细怎么填
  • 如何调整所得税费用
  • 向职工支付职工福利费
  • 事业单位财务收支
  • 承包租赁成本明细表的预算项目
  • 小规模纳税人开专票税率是1%还是3%
  • 个人收到支票如何做账
  • 人力资源公司差额开票
  • 残保金属于职工薪酬吗
  • 城建税一定要当月缴纳吗
  • 税盘减免会计分录
  • 收回代付费用用什么科目
  • 剑灵怎么双开2023
  • 电信apn接入点设置+最快
  • window10专业版2021
  • 企业所得税费用扣除比例
  • 如果退货卖家拒绝会把货退回来么
  • 有留抵税额怎么做分录
  • 无法支付的货款如何处理
  • thinkphp smarty
  • 建筑公司内账复杂吗
  • 一般纳税人开出13%的普通发票怎么扣税
  • PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
  • 小规模未开票收入如何申报增值税
  • 资金平衡表的编制方法
  • 得物的成本结构是什么
  • vue.mixin是什么
  • 最新预提房租会计分录
  • 远程调试时,gdbserver运行在调试机
  • 增值税普通发票和专用发票有什么区别
  • mysql 长事务
  • 种植中药材公司取名字大全
  • python numpy 删除元素
  • mongodb中主键的默认格式是哪个?
  • mongodb配置文件详解
  • 主营业务成本结转本年利润会计分录
  • 营业成本怎么理解
  • 最新出口退税申报需要哪些资料
  • 收到的发票未抵税怎么办
  • 垃圾清运费会计处理
  • 工程款的税费怎么计算
  • 主营业务收入需要减去增值税吗
  • 可以从公司公户直接支付给个人的款项有哪些
  • 专打发票的打印机
  • 公司发放给员工的福利又要回
  • 小规模如何申报1个点
  • 融资租出固定资产的账务处理
  • 高新企业研发项目规定几个
  • 个体工商户个税2023最新政策
  • sqlserver数据库测试工具
  • mysql多表连接的方式
  • sql局部变量标识符
  • mysql 5.7.11 winx64初始密码修改
  • linux系统vim编辑readonly option
  • Computer Browser是什么进程,Computer Browser有什么用?
  • 如何重设路由器密码怎么办
  • 请问usb是什么意思啊
  • win 8.1 preview ISO镜像安装方法简易教程
  • windows7版本支持功能最少的
  • silent.exe - silent是什么进程 有什么用
  • linux命令行在哪
  • win8怎么打开蓝牙设置
  • win10系统的文件夹选项在哪里
  • win10预览版好吗
  • win7磁盘空间不足怎么清理文件
  • python加密模块
  • 什么叫屏蔽屏幕按键
  • 我决定放弃了你却对我笑了
  • 深入理解中国式现代化
  • 安卓调用系统相机
  • 不同版本安卓控制台区别
  • android布局背景颜色的代码
  • javascript高级教程pdf
  • 河南税务报到
  • 公司汽车用油计入什么科目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设