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


相关推荐

  • HashMap数据结构(hashmap数据结构图)

    Java综合/**  *@authorannegu  *@date2009-12-02  */Hashmap是一种非常常用的、应用广泛的数据类型,最近研究到相关的内容,就正好复习一下。网上关于hashmap的文章很多,但到底是自己学习的总结,就发出来跟大家一起分享,一起讨论。1、hashmap的数据结构要知道hashmap

    2022年4月17日
    74
  • java查找字符的方法_Java字符串查找(3种方法)

    java查找字符的方法_Java字符串查找(3种方法)在给定的字符串中查找字符或字符串是比较常见的操作。字符串查找分为两种形式:一种是在字符串中获取匹配字符(串)的索引值,另一种是在字符串中获取指定索引位置的字符。根据字符查找String类的indexOf()方法和lastlndexOf()方法用于在字符串中获取匹配字符(串)的索引值。1.indexOf()方法indexOf()方法用于返回字符(串)在指定字符串中首次出现的索引位置,…

    2025年6月8日
    1
  • 详解马氏距离中的协方差矩阵计算(超详细)

    详解马氏距离中的协方差矩阵计算(超详细)一、概率统计基本知识1.样本均值样本均值(Mean)是在总体中的样本数据的平均值。2.样本方差方差(Variance)是度量一组数据的离散(波动)程度。方差是各个样本与样本均值的差的平方和的均值,分母除以n-1是为了满足无偏估计:3.样本标准差4.协方差协方差(Covariance)是度量两个变量的变动的同步程度,也就是度量两个变量线性相关性程度。若协方差大于0,表示一个变量增大时另一个变量也会增大,即两个变量呈正相关;若协方差小于0,表示一个变量增大时另一个变量会减小,即两个变量呈负相关

    2022年6月28日
    53
  • python安装cv2模块的方法(python中cv2库)

    python如何安装cv2模块  大家在第一次安装cv2模块的时候可能会犯这样的错误,输入pip(3)installcv2命令后,vc2并没有开始安装,而是返回这样一个错误一个错误:Couldnotfindaversionthatsatisfiestherequirementcv2(fromversions:)Nomatchingdistributionf…

    2022年4月14日
    65
  • 坐标拾取系统定位_cad移动到绝对坐标

    坐标拾取系统定位_cad移动到绝对坐标usingUnityEngine;usingUnityEngine.UI;usingSystem.Collections;publicclasstransforms:MonoBeh

    2022年8月5日
    6
  • 常量字符串过长的解决办法_未受控的格式化字符串

    常量字符串过长的解决办法_未受控的格式化字符串如果使用String str = “这是一个很长很长很长 你需要的字符串。”; 出现异常不能正常编译运行时,可以使用下方:StringBuilder sb = new StringBuilder();sb.append(“这是一个很长很长”);sb.append(“很长 你需要的字符串”);字符串太长或字符串其他情况下可使用 : StringBuilder sb = new StringBuilder()…

    2022年8月19日
    37

发表回复

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

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