vue @click @tap重叠事件区分方式
更新时间：2022年03月26日 16:23:31 作者：车家大少爷
这篇文章主要介绍了vue @click @tap重叠事件区分方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
@click @tap重叠事件区分
点击remove事件会触发details事件,使用@click.stop
<ul> <li v-for="item in data.list" :key="item.id" @click="details(item)"> <font @click.stop="edit(item)">编辑</font> <font @click.stop="remove(item)">删除</font> </li> </ul> <ul> <li v-for="item in data.list" :key="item.id" @tap="details(item)"> <font @tap.stop="edit(item)">编辑</font> <font @tap.stop="remove(item)">删除</font> </li> </ul>
click和tap事件的区别
click事件
click事件是pc端的单机事件，但是当这个事件在移动端实现的时候，会出现延迟300ms的现象，所以移动端一般用tap来代替click。
tap事件
tap可以减少click在移动端的延迟，提高了性能。
点透问题
在同一个z轴上，z-index不同的两个元素，上面的元素是一个绑定了tap事件的，下面是一个a标签，一旦tap触发，这个元素就会display: none，而从上面的tap可以看出，有touchstart、touchend，所以会300ms之后触发click事件，而z-index已经消失了，所以，触发了下面的a的click事件，注意： 我们认为a标签默认是绑定了click事件的。而这种现象不是我们所期待的。
使用fastclick来解决移动端输入框聚焦不灵敏问题
在移动端，输入框可能会出现点击后无法输入，需要长按或者连续点击才能获得输入框的聚焦，这时候可以使用fastclick来解决这个问题。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM，这篇文章主要介绍了vue中的render函数、h（）函数、函数式组件,需要的朋友可以参考下2023-02-02
Vue是一套用于构建用户界面的渐进式框架,它的核心库只关注视图层,易于上手,也便于与其他库或已有项目整合,下面这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
由于涉及到vue框架单网页应用首屏加载慢这个问题,我们需尽量减少加载负担,故采用按需引入的方式,只引入项目中用到的组件,这篇文章主要给大家介绍了关于Vue3按需引入Element Plus以及定制主题色的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue打包程序部署到Nginx 点击跳转404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家介绍了vue多页面项目实现版本快照功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家分享了一款MVVM组件，详细介绍了Vue基础语法和常用指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了VSCode配置启动Vue项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论