ReactJS - 触摸事件处理程序

触摸事件对于增强用户体验非常重要，尤其是在智能手机和平板电脑等触摸设备上。我们将了解几种触摸事件、它们的类型以及如何在 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;

输出

This code generates the App React component. When one of the four touch events (touchstart, touchmove, touchend, and touchcancel) happens, the message is logged in the console. The component also provides a clickable <div> element with which we can interact on a touch-enabled device.

示例 - 长按应用

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

import React from 'react';

class App extends React.Component {
   handleTouchStart = () => {
      this.longPressTimer = setTimeout(() => {
         console.log('Long press detected');
      }, 1000); // Adjust the duration for long press threshold
   };
   
   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;

输出

Open the app in a browser. Touch the app and keep your touch held for at least 1000 milliseconds. After the specified duration, we will be able to see the message "Long press detected" logged to the browser's console.

示例 - 捏合缩放应用

Pinch Zoom React 应用旨在检测捏合手势的开始和结束，通常用于触摸设备上的缩放操作。该应用有一个具有浅蓝色背景的 div 元素，其宽度和高度均为 200 像素。当用户开始捏合手势时，它会在控制台中记录消息“捏合开始”。类似地，当用户结束捏合手势时，它会记录消息“捏合结束”。

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;

输出

Open the app in a browser. Use a touch-enabled device (like smartphone or tablet). Touch the app with two fingers simultaneously to trigger the "Pinch started" message. Release one or both fingers to trigger the "Pinch ended" message.

总结

触摸事件在 React 应用中扮演着重要的角色，用于创建引人入胜和交互式用户界面，尤其是在触摸设备上。了解各种触摸事件以及如何管理它们，使我们能够为网站或应用程序用户提供轻松的用户体验。