vue的@click和@tap重叠事件区分方式是什么

这篇“vue的@click和@tap重叠事件区分方式是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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的@click和@tap重叠事件区分方式是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。