ReactJS - TouchEvent 处理程序

触摸事件对于增强用户体验非常重要，尤其是对于智能手机和平板电脑等触摸敏感设备。我们将研究几种触摸事件、它们的类型以及如何在 React 应用程序中处理它们。

触摸事件是 Web 开发 UI 事件大家族的一部分。这些事件让我们能够记录和响应用户活动，如点击、滑动和捏合。

语法

<div
   onTouchStart={e => console.log('onTouchStart')}
   onTouchMove={e => console.log('onTouchMove')}
   onTouchEnd={e => console.log('onTouchEnd')}
   onTouchCancel={e => console.log('onTouchCancel')}
/>

参数

e − 这是一个 React 事件对象，我们可以将其与 TouchEvent 属性一起使用。

TouchEvent 的类型

有四种主要的触摸事件需要注意 −

TouchEvent 的属性

有一些触摸事件属性需要注意 −

示例

示例 − 简单触摸应用

我们将使用以下代码创建一个简单的 React 应用来显示 TouchEvent 处理程序。这是一个在控制台中显示触摸事件的小型 React 应用 −

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div
            onTouchStart={(e) => console.log("onTouchStart")}
            onTouchMove={(e) => console.log("onTouchMove")}
            onTouchEnd={(e) => console.log("onTouchEnd")}
            onTouchCancel={(e) => console.log("onTouchCancel")}
            style={{
            width: "200px",
            height: "200px",
            backgroundColor: "lightblue",
            textAlign: "center",
            lineHeight: "200px"
            }}
         >
            TouchEvent
         </div>
      );
   }
}

export default App;

输出

此代码生成 App React 组件。当发生四个触摸事件(touchstart、touchmove、touchend 和 touchcancel)之一时，消息将记录在控制台中。该组件还提供了一个可点击的 <div> 元素，我们可以在支持触摸的设备上与其交互。

示例 − 长按应用

给定的 React 应用名为"LongPressApp"，旨在检测支持触摸的设备上长按。该应用有一个浅蓝色背景的 div 元素，其宽度和高度均为 200 像素。当我们触摸并按住该应用至少 1000 毫秒时，它会向控制台记录一条消息，指出"检测到长按"。

import React from 'react';

class App extends React.Component {
   handleTouchStart = () => {
      this.longPressTimer = setTimeout(() => {
         console.log('Long press detected');
      }, 1000); // 调整长按持续时间阈值
   };
   
   handleTouchEnd = () => {
      clearTimeout(this.longPressTimer);
   };   
   render() {
      return (
         <div
            onTouchStart={this.handleTouchStart}
            onTouchEnd={this.handleTouchEnd}
            style={{
               width: '200px',
               height: '200px',
               backgroundColor: 'lightblue',
               textAlign: 'center',
               lineHeight: '200px',
            }}
         >
            LongPressApp
         </div>
      );
   }
}

export default App;

输出

在浏览器中打开应用。触摸应用并保持触摸至少 1000 毫秒。在指定的持续时间后，我们将能够看到记录到浏览器控制台的消息"检测到长按"。

示例 − 捏合缩放应用

捏合缩放 React 应用旨在检测捏合手势的开始和结束，通常用于在支持触摸的设备上缩放。该应用有一个带有浅蓝色背景的 div 元素，宽度和高度均为 200 像素。当用户开始捏合手势时，它会将消息"Pinch started(捏合已开始)"记录到控制台。同样，当用户结束捏合手势时，它会记录消息"Pinch ended(捏合已结束)"。

import React from 'react';

class App extends React.Component {
   handleTouchStart = (e) => {
      if (e.touches.length === 2) {
         console.log('Pinch started');
      }
   };   
   handleTouchEnd = (e) => {
      if (e.touches.length < 2) {
         console.log('Pinch ended');
      }
   };
   
   render() {
      return (
         <div
            onTouchStart={this.handleTouchStart}
            onTouchEnd={this.handleTouchEnd}
            style={{
               width: '200px',
               height: '200px',
               backgroundColor: 'lightblue',
               textAlign: 'center',
               lineHeight: '200px',
            }}
         >
            PinchZoomApp
         </div>
      );
   }
}

export default App;

输出

在浏览器中打开应用。使用支持触摸的设备(如智能手机或平板电脑)。同时用两根手指触摸应用以触发"捏合开始"消息。松开一根或两根手指以触发"捏合结束"消息。

摘要

触摸事件在 React 应用中起着重要作用，可用于创建引人入胜且具有交互性的用户界面，尤其是在触摸感应设备上。了解各种触摸事件以及如何管理它们，使我们能够为我们的网站或应用用户提供轻松的用户体验。

reactjs_reference_api.html