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来解决这个问题。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近在使用vite生成项目,这篇文章主要给大家介绍了关于vue3+vite中开发环境与生产环境全局变量配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue.config.js中的devServer使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了antd Form组件表单在vue3中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下2023-10-10
Vue的watch侦听器格式有两种：方法格式和对象格式的侦听器，这篇文章主要介绍了Vue watch 侦听对象属性相关知识,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue-cli3搭建项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要介绍了关于vue.js v-bind 的一些理解和思考，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue单应用在ios系统中实现微信分享功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue使用lodop打印控件实现浏览器兼容打印的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-02-02
详解vuex数据传输的两种方式及this.$store undefined的解决办法
这篇文章主要介绍了vuex数据传输的两种方式 及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论