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)
上一篇 2022年6月19日 下午7:46
下一篇 2022年6月19日 下午8:00


相关推荐

  • css选择器nth-child()和nth-of-type()的应用

    css选择器nth-child()和nth-of-type()的应用

    2021年9月8日
    64
  • 关于get请求的长度限制到底是多少?—-一个误区,一个教训

    关于get请求的长度限制到底是多少?—-一个误区,一个教训截至今日之前,我一直因为从某处看到get、post区别中写的:get有长度限制,1024B。很抱歉在未经过个人的检验后,直接奉为正确的定义(也提醒我个人:以后概念理论,还是需要好好验证或求证,要能在繁杂的网络知识中,认真求真,以防以讹传讹!!!)。今日,看到前同事大牛多年前的csdn知识总结,发现原来一直信奉的1024Get请求长度,是错误的。下面把从权威官网的解释复制过来,以做…

    2022年8月24日
    11
  • k8s kubedns_kubernetes使用

    k8s kubedns_kubernetes使用K8s应用部署方式的演变kubernetes简介kubernetes组件kubernetes组件调用关系的应用示例kubernetes概念应用部署方式的演变应用部署方式的演变• 在部署应用程序的方式上,主要经历了三个时代:传统部署:• 互联网早期,会直接将应用部署在物理机上。• 优点:简单,不需要其他的技术参与。• 缺点:不能为应用程序定义资源的使用边界,很难合理的分配计算机资源,而且程序之间容易产生影响。虚拟化部署:• 可以在一台物理机上运行多个虚拟机,每个虚拟机都是独立的一个环境。

    2022年8月11日
    5
  • 微信公众平台实现获取用户OpenID的方法

    微信公众平台实现获取用户OpenID的方法

    2021年11月6日
    40
  • 虚拟opc服务器软件,几个OPC服务器开发工具比较

    虚拟opc服务器软件,几个OPC服务器开发工具比较1、WTOPCsvr.dll2、我2004年获得WTOPCsvr.dll的代码,这个代码是我学习VC++的启蒙,也是我学习OPC服务器开发的最重要的资料。用VB开发OPC服务器的话,可以说是首选,简单调用WTOPCsvr.dll的API就可以开发服务器。我到现在还是很钟爱这份代码。完全用MFC的方式,通过嵌套类实现COM组件的接口,代码比较清晰。2、Iconics2.11和FactorySoft…

    2022年6月20日
    31
  • 镁光闪存颗粒对照表_海力士、南亚、镁光内存颗粒编码解析,妈妈再也不用担心你买内存条了…「建议收藏」

    镁光闪存颗粒对照表_海力士、南亚、镁光内存颗粒编码解析,妈妈再也不用担心你买内存条了…「建议收藏」海力士、南亚、镁光内存颗粒编码解析,妈妈再也不用担心你买内存条了2019-12-1915:19:5740点赞221收藏11评论你是AMDYes党?还是intel和NVIDIA的忠实簇拥呢?最新一届#装机大师赛#开始啦!本次装机阵营赛分为3A红组、intelNVIDIA蓝绿组、混搭组还有ITX组,实体or虚拟装机都能参与,可使用值得买定制化DIY装机工具在文中展现配置单!每个小组均有精美礼品,…

    2022年6月22日
    592

发表回复

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

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