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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • FileInputStream 读取文件内容「建议收藏」

    FileInputStream 读取文件内容「建议收藏」publicclassTest{publicstaticvoidmain(String[]args)throwsIOException{finalStringpath="D:/1.txt"; //1、得到数据文件 Filefile=newFile(path); //2、建立数据通道 FileInputStreamfile…

    2022年6月11日
    89
  • 1156针cpu排行_755针最强CPU

    1156针cpu排行_755针最强CPUIntel酷睿i7875K¥2330CPU主频:2930MHz智能加速:3600MHz插槽类型:LGA1156制作工艺:45纳米二级缓存:4×256KB三级缓存:8M核心数量:四核心核心类型:Lynnfield线程数:八线程总线类型:DMI总线热设计功耗(TDP):95W内核电压:0.65-1.40V内存控制器:双通道DDR3-1066/1333最大16G64位处理器。…

    2022年9月20日
    0
  • Stream流、方法引用

    Stream流、方法引用

    2021年5月19日
    127
  • 使用CityScapes数据集训练实例分割网络YOLACT

    使用CityScapes数据集训练实例分割网络YOLACT#2020开年第一篇,谁能预料新年伊始的世界如此脆弱,中国疫情肆虐,美伊箭拔弩张,英国愤懑脱欧,儿时的偶像科比和女儿也不幸离世,生命之渺小,生活之曲折,兄弟们,要充满阳光地活着啊,人间,值得。:-)今天还是鄙人生日,愿世间多点爱,与和平。上一篇介绍了博主用CityScapes数据集提取了五类实例,并转换成了COCO数据集的标注格式(将CityScapes数据集转换为COCO格式的实例分割数据集…

    2022年8月23日
    3
  • 游戏 海外推广_手游礼包助手

    游戏 海外推广_手游礼包助手最近,网上正在热烈地讨论起优质游戏版号买卖的“生意经”了。国内手游的这条路,走得越来越不容易,现在正卡在了游戏版号这个瓶颈上,呼吸困难。而且国内的手游市场已经被大型企业比如腾讯和网易等巨头所占据,中小型的游戏厂商的出路在哪里?不用问,他们走上了出海之路!出海之路离不开手游APP的推广和营销,为了把钱花到刀刃上,需要了解怎么提升海外手游APP推广的ROI?我们选择了关于推广海外手游并提升ROI的四…

    2025年7月17日
    0
  • mysql8和mariadb_mariadb迁移到mysql

    mysql8和mariadb_mariadb迁移到mysqlMariaDB为可替代MySQL的增强版本,但在已安装了MySQL的情况下同时也能安装MariaDB.(这是有意义的,例如你想从一个数据库/应用迁MariaDB为可替代MySQL的增强版本,但在已安装了MySQL的情况下同时也能安装MariaDB.(这是有意义的,例如你想从一个数据库/应用迁移到另一个数据库/应用中.)以下是在已安装MySQL的情况下,安装MariaDB的主要步骤.下载…

    2022年10月24日
    0

发表回复

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

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