乘风原创程序

  • vue?@click?@tap重叠事件区分方式
  • 2022/3/26 10:10:13
  • @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来解决这个问题。

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。