百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

Vue 3 中监听手机端触摸事件的实战指南

bigegpt 2024-10-12 06:29 4 浏览

随着移动设备的普及,Web 应用需要更好地适应触摸操作。在 Vue 3 中,我们可以利用原生的 DOM 事件和 Vue 的响应式系统来监听和处理触摸事件,从而创建出流畅的移动端用户体验。本篇技术博客将深入探讨如何在 Vue 3 中有效地监听和响应手机端的触摸事件。

1. 触摸事件概述

在HTML5中,为了支持触摸操作,引入了一系列触摸事件,包括但不限于:

  • touchstart:触摸开始
  • touchmove:触摸移动
  • touchend:触摸结束
  • touchcancel:触摸取消

这些事件允许开发者检测用户在触摸屏上的手势,比如滑动、点击等。

2. 使用原生事件监听

在 Vue 3 中,你可以直接在模板中使用v-on指令监听触摸事件,或者在setup函数中使用addEventListener来注册事件监听器。

2.1 模板方式

<template>
  <div @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    Touch me!
  </div>
</template>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      console.log('Touch started:', event.touches);
    },
    handleTouchMove(event) {
      console.log('Touch moved:', event.changedTouches);
    },
    handleTouchEnd(event) {
      console.log('Touch ended:', event.changedTouches);
    },
  },
};
</script>

2.2 Composition API

<template>
  <div ref="touchTarget">Touch me!</div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const touchTarget = ref(null);

    onMounted(() => {
      touchTarget.value.addEventListener('touchstart', handleTouchStart);
      touchTarget.value.addEventListener('touchmove', handleTouchMove);
      touchTarget.value.addEventListener('touchend', handleTouchEnd);
    });

    onBeforeUnmount(() => {
      touchTarget.value.removeEventListener('touchstart', handleTouchStart);
      touchTarget.value.removeEventListener('touchmove', handleTouchMove);
      touchTarget.value.removeEventListener('touchend', handleTouchEnd);
    });

    function handleTouchStart(event) {
      console.log('Touch started:', event.touches);
    }

    function handleTouchMove(event) {
      console.log('Touch moved:', event.changedTouches);
    }

    function handleTouchEnd(event) {
      console.log('Touch ended:', event.changedTouches);
    }

    return {
      touchTarget,
    };
  },
};
</script>

3. 处理触摸事件的注意事项

  • 事件对象:触摸事件携带的信息通常包含在event.touches(触摸开始时的所有触点)、event.changedTouches(自上次事件以来发生变化的触点)和event.targetTouches(当前在目标元素上的触点)中。
  • 事件冒泡:触摸事件遵循DOM事件的冒泡机制,可以在组件树的任意层级监听。
  • 手势识别:通过监听多个触摸事件,可以识别和处理更复杂的手势,如滑动、旋转、缩放等。
  • 性能优化:在处理大量触摸事件时,记得使用event.preventDefault()阻止默认行为,避免不必要的页面重绘,以提升性能。

4. 结论

Vue 3 提供了多种方式来监听和处理触摸事件,无论是使用模板指令还是Composition API,都能轻松地实现移动端的交互。结合Vue的响应式系统,你可以构建出高度交互和响应的触摸友好型Web应用。在实际开发中,务必考虑性能和手势识别的细节,以提供最佳的用户体验。

相关推荐

Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点

在分布式系统中,Redis作为高性能的内存数据库,其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案:主从复制、哨兵模式和Cluster模式,帮助开发者...

redis的主从复制,读写分离,主从切换

当数据量变得庞大的时候,读写分离还是很有必要的。同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能。redis提供了一个master,多个sl...

# Redis 入门到精通(九)-- 主从复制(3)

#Redis入门到精通(九)--主从复制(3)##一、redis主从复制-常见问题(1)###1、伴随着redis系统的运行,master的数据量会越来越大,一旦master重启...

redis - 主从复制(Redis主从复制时序图)

1引言在上一篇文章中,我们了解了Redis两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AO...

# Redis 入门到精通(九)-- 主从复制(2)

#Redis入门到精通(九)--主从复制(2)##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1)如果master数据量巨大,数据同步阶段应...

Redis主从复制(redis主从复制主节点挂了)

介绍Redis有两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AOF文件恢复内存中的数据。不过...

深入解析 Redis 集群的主从复制实现方式

在互联网大厂的后端开发领域,Redis作为一款高性能的内存数据库,被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制,更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...

Redis主从架构详解(redis主从架构高可用如何实现)

Redis主从架构搭建Redis主节点配置创建主节点目录(/opt/redis-master),复制redis.conf到该目录下,redis.conf配置项修改#后台启动daemonizeyes...

抖音“四大包塘战神”:承包了全网的快乐

在抖音钓鱼垂类领域,"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者,以承包鱼塘为舞台,用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...

ORACLE 11G RAC 安装-通过VM配置共享磁盘

简介:在自己的电脑上通过VM软件搭建Oracle11GRAC,通过修改VM的参数文件来实现磁盘共享!目标:搭建RAC环境实现:使用VMwareWorkstation8.0.0+ORACLE...

Linux操作系统安全配置(linux系统安全配置包括)

一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...

关于Linux性能调优中网络I/O的一些笔记

写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅,可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...

从 Sonatype Nexus Repository Manager 迁移到 Artifactory

1.Nexus1.1下载下载链接:https://help.sonatype.com/repomanager3/product-information/download/download-archiv...

Ubuntu20安装zabbix5.0企业监控系统亲测教程

前言示例主机:zabbix10.0.100.10,将安装在UbuntuServer上教程说明:因使用官方教程无法安装成功,所以本教程与官方教程有所不同安装前提:已安装UbuntuServer2...

Linux内核设计与实现—进程管理(linux内核程序设计)

进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段,textsection)。通常进程还要包含其他资源,像打开的文件,挂起的信号,...