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


相关推荐

  • 绕过“请在微信客户端打开链接”如微师下载视频等。

    绕过“请在微信客户端打开链接”如微师下载视频等。UA(UserAgent)的问题。微信内置的浏览器设置了特定的UA,在网页加载时会识别这个UA修改UA:浏览器不同地方不同360浏览器:F2点击右上角”更多工具”-“网络状态”找到下面的用户代理(UserAgent),取消选择Selectautomatically(自动选择),然后在输入框中加入“MicroMessenger”就可以了。goole:我用的是Chrome,其他浏览器也大同小异。在你打开需要的网页链接之前F12打开开发者…

    2022年5月18日
    77
  • Jquery 400报错

    Jquery 400报错问题:前端能够完整传递数据,后台不能相应的接收到所有的数据解决思路:1,前端传送的数据格式和后端接收的数据格式不一一对应,400报错2,修改前端界面的name属性,name的属性与后台的接收字段名称,3,如果使用实体接收数据的话,未接收到数据,则是数据类型的问题,传递过来的数据默认是String类型的数据,但是实体中有integer或者timestamp格式4,如果使用参数集合接收数据,…

    2022年6月7日
    36
  • matlab在指定figure中画图_matlab保存fig为图片语句

    matlab在指定figure中画图_matlab保存fig为图片语句转载:http://www.ilovematlab.cn/thread-296430-1-1.html最近看了一些用matlab对图形图片进行保存的帖子和资源,关于图像保存的方法给大家分享一下这些方法是大家所使用方法的一个总结.如今常用的方法有三种printf,imwrite,saveas下面分别介绍一下:imwritemwrite将图像数据写成图像文件,一般用

    2025年11月2日
    3
  • nginx根据端口转发(mysql数据库端口)

    在Nginx配置文件里面加上stream{server{listen3306;//3306自己的数据库端口proxy_passlocalhost:3306;}}

    2022年4月14日
    210
  • pycharm添加conda虚拟环境[通俗易懂]

    pycharm添加conda虚拟环境[通俗易懂]

    2022年8月28日
    2
  • ue4安装插件_ue4 软引用

    ue4安装插件_ue4 软引用原创文章,转载请注明出处。本文介绍两个知识点Plugin/Module插件和模块的联系区别,同时介绍插件和我们的Source中创建多模块。**一、Plugin/Module插件和模块的联系区别**1>一个插件至少有一个模块2>一般插件都是做底层做通用设计的,而模块做的负责的我理解为逻辑ProjectName.Build.cs //主要管理的是链接,dll的链接ProjectName.Target.cs //管理的是编译,加上才会编译你的Module,如果你是run

    2022年10月4日
    1

发表回复

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

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