您的位置：首页 > 编程技术 > js  >  vue @click @tap重叠事件区分方式

vue @click @tap重叠事件区分方式

 更新时间：2022年3月26日 21:27  点击：710 作者：车家大少爷

@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来解决这个问题。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。

原文出处：https://blog.csdn.net/qq_39816586/article/details/88567501

[!--infotagslink--]

相关文章

  • C#事件(event)使用方法详解

    本文给大家介绍了在C#中，事件(event)的概念和使用方法，文章适合一些初学者学习，主要讲解了一些概念和一些代码案例。...2020-06-25

  • java 判断两个时间段是否重叠的案例

    这篇文章主要介绍了java 判断两个时间段是否重叠的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15

  • jQuery事件绑定用法详解(附bind和live的区别)

    这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21

  • C#事件实例详解

    这篇文章主要介绍了C#事件实例详解的相关资料,需要的朋友可以参考下...2020-06-25

  • jQuery Mobile 触摸事件实例

    这篇文章主要演示了5个jQuery Mobile 触摸事件实例,需要的朋友可以参考下。...2016-06-12

  • easyUI下拉列表点击事件使用方法

    这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22

  • 详解C#中委托，事件与回调函数讲解

    这篇文章主要介绍了详解C#中委托，事件与回调函数讲解,小编觉得挺不错的，现在就分享给大家，也给大家做个参考。...2020-06-25

  • jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

    这篇文章主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下...2016-01-21

  • 详解C#之事件

    这篇文章主要介绍了C#之事件的知识点，文中代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以参考下...2020-06-25

  • python编程PyQt5创建按钮及触发点击事件示例解析

    这篇文章主要为大家介绍了python编程使用PyQt5如何创建按钮及触发点击事件的示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步...2021-10-29

  • C#移除所有事件绑定的方法

    这篇文章主要介绍了C#移除所有事件绑定的方法,实例分析了C#事件绑定的移除方法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏...2014-06-07

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    这篇文章主要介绍了jQuery中bind(),live(),delegate(),on()绑定事件方法,结合实例形式详细分析了bind(),live(),delegate(),on()方法绑定事件的具体使用技巧,并对比分析了四种方式的异同点,需要的朋友可以参考下...2016-01-21

  • jquery实现输入框实时输入触发事件代码

    本文主要分享了jquery实现输入框实时输入触发事件的代码，代码简单易懂，需要的朋友一起来看下吧...2017-01-09

  • JS判断键盘是否按的回车键并触发指定按钮点击操作的方法

    下面小编就为大家带来一篇JS判断键盘是否按的回车键并触发指定按钮点击操作的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-02-19

  • C#中事件的动态调用实现方法

    这篇文章主要介绍了C#中事件的动态调用实现方法,对比传统思路优劣给出了一个新的解决方案,需要的朋友可以参考下...2020-06-25

  • 微信小程序 教程之事件

    这篇文章主要介绍了微信小程序 事件的相关资料,并附实例代码，需要的朋友可以参考下...2016-10-20

  • JavaScript鼠标悬停事件用法解析

    这篇文章主要介绍了JavaScript鼠标悬停事件用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-15

  • JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

    多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言，当鼠标点击此文本框的时候能够将里面的默认文本清除，当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框...2016-01-14

  • 结合.net框架在C#派生类中触发基类事件及实现接口事件

    这篇文章主要介绍了结合.net框架在C#派生类中触发基类事件及实现接口事件,示例的事件编程中包括接口和类的继承等面向对象的基础知识,需要的朋友可以参考下...2020-06-25