Vue 绑定使用 touchstart touchmove touchend[通俗易懂]

Vue 绑定使用 touchstart touchmove touchend[通俗易懂]Vue简单绑定touchstarttouchmovetouchend

大家好,又见面了,我是你们的朋友全栈君。

今天要做一个页面div长按后触发事件,简单学习后实现如下:
先看代码:

<template>
  <div>

    <div class="test" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">试一试呀!</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        
    }
  },
    methods:{
        gtouchstart(){
            window.console.log('1,按下啦啦啦啦啦')
            
        },
        gtouchmove(){
            window.console.log('2,按下并且在移动呢')
        },
        gtouchend(){
            window.console.log('3,松开啦啦啦啦啦')
        }
    }
}
</script>
<style scoped>
    .test{
        width: 100%;
        height: 50px;;
        text-align: center;
        background-color: red;
        line-height: 50px;
        font-size: 50px;
    }
 
</style>

看结果:
在这里插入图片描述
鼠标在红色区域内按下会输出1,

在这里插入图片描述
按下鼠标不松开然后移动会输出2,
在这里插入图片描述
松开后就会输出3,

根据自己的情况在三个函数里写入相应的功能。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/150773.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 已刻游戏目录

    已刻游戏目录单机游戏1.生化奇兵1、2、32.蔷薇少女格斗3.全女格斗2.04.劲乐团5.魔兽争霸6.生化危机1-6启示录7.MaxPayne2+38.寄生前夜9.恐龙危机1、210.梦幻模拟战4、511.PS模拟器:北欧女神、放浪冒险谭、寄生前夜、寂静岭1、异度装甲、月下夜想曲、古惑狼1-3、封神演义、苍魔灯、鬼屋魔影、武藏传12.FC模拟器13.MD模拟器14.杀手4…

    2022年5月8日
    33
  • 求线性卷积_卷积神经网络目标检测

    求线性卷积_卷积神经网络目标检测SiamFC:利用全卷积孪生网络进行视频跟踪

    2022年10月1日
    0
  • KDD2018《Adversarial Attacks on Neural Networks for Graph Data》 论文详解「建议收藏」

    KDD2018《Adversarial Attacks on Neural Networks for Graph Data》 论文详解「建议收藏」论文链接:https://arxiv.org/pdf/1805.07984.pdfAbstract本文介绍了第一个在属性图上进行对抗攻击的研究,特别关注利用图卷积的思想模型。除了在测试阶段进行攻击,本文进行了更具挑战的poisoningattack(聚焦于机器学习模型的训练阶段)类别。在考虑实例间依赖关系的情况下,针对节点特征和图结构进行对抗扰动(adversarialperturbation)。通过保证重要的数据特征保证扰动是不可见的(unnoticeable)。为了解决底层的离散域(disc

    2022年8月11日
    9
  • Proxy实现mysql读写分离

    1.mysql实现读写分离的方式mysql实现读写分离的方式有以下几种:程序修改mysql操作,直接和数据库通信,简单快捷的读写分离和随机的方式实现的负载均衡,权限独立分配,需要开发人员协助。amoeba,直接实现读写分离和负载均衡,不用修改代码,有很灵活的数据解决方案,自己分配账户,和后端数据库权限管理独立,权限处理不够灵活。mysql-proxy,直接实现读写分离和负载均衡,不用…

    2022年4月10日
    39
  • PAT乙级题目答案汇总 PAT (Basic Level) Practice (中文)[通俗易懂]

    PAT乙级题目答案汇总 PAT (Basic Level) Practice (中文)[通俗易懂]题目列表:标号题目链接分数博客链接完成时间1001害死人不偿命的(3n+1)猜想151001害死人不偿命的(3n+1)猜想(15分)2020/8/01

    2022年5月29日
    35
  • python执行测试用例_python自动生成测试用例

    python执行测试用例_python自动生成测试用例前言通常我们认为每个测试用例都是相互独立的,因此需要保证测试结果不依赖于测试顺序,以不同的顺序运行测试用例,可以得到相同的结果。pytest默认运行用例的顺序是按模块和用例命名的ASCII编码

    2022年7月30日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号