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


相关推荐

  • 漏洞扫描 渗透测试_什么是渗透

    漏洞扫描 渗透测试_什么是渗透渗透测试阶段信息收集完成后,需根据所收集的信息,扫描目标站点可能存在的漏洞,包括SQL注入漏洞、跨站脚本漏洞、文件上传漏洞、文件包含漏洞及命令执行漏洞等,然后通过这些已知的漏洞,寻找目标站点存在攻击的入口。那么今天我们就介绍几款常用的WEB应用漏洞扫描工具。一、AWVSAcunetixWebVulnerabilityScanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞。在漏洞扫描实战过程中,一般会首选AWVS,因为这个能扫描出来的漏洞很多,而

    2025年11月4日
    2
  • shiro过滤放行方法_shiro框架原理

    shiro过滤放行方法_shiro框架原理之间工作中曾经用到过shiro这个权限控制的框架,之前一直都是停留在用的方面,没有过多的去理解这方面的知识,现在有时间,专门研究了一下这个Shiro权限的框架使用。Shiro是什么?ApacheShiro是一个强大而灵活的开源安全框架,它干净利落地处理身份认证,授权,企业会话管理和加密。ApacheShiro的首要目标是易于使用和理解。安全有时候是很复杂的,甚至是痛苦的,但它没有必要这样。框…

    2025年10月1日
    1
  • Django(55)GenericAPIView源码分析

    Django(55)GenericAPIView源码分析源码分析GenericAPIView继承自APIView,也就是在APIView基础上再做了一层封装,源码如下:classGenericAPIView(views.APIView):query

    2022年7月31日
    6
  • 力扣算法题—073矩阵置零

    力扣算法题—073矩阵置零

    2021年7月4日
    78
  • 矩阵范数与向量范数关系_矩阵范数的定义

    矩阵范数与向量范数关系_矩阵范数的定义范数是距离在向量和矩阵上的推广,在研究收敛性、判断矩阵非奇异等方面有广泛应用。本节包括以下内容:(1)向量范数;(2)矩阵范数;(3)从属范数;(4)谱半径;(5)矩阵的非奇异条件。1向量范数从向量到实数的映射/函数。定义(1)条件:非负性、齐次性、三角不等式(∥x+y∥≤∥x∥+∥y∥\|x+y\|\leq\|x\|+\|y\|)。

    2022年9月19日
    5
  • JavaScript 常用转义字符

    JavaScript 常用转义字符JavaScript 的转义字符依然是 下面是常用的转义字符 b 代表退格 t 代表一个制表符 即一个 Tab 空格 n 换行回车 v 垂直的制表符 r 回车 双引号 单引号 反斜线 即 OOO 使用八进制表示的拉丁字母 OOO 表示一个 3 位的八进制整数 范围是 000 377 xHH 使用十六进制数表示的拉丁字母 HH 表示一

    2025年8月25日
    3

发表回复

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

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