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 應用中扮演著重要的角色，用於建立引人入勝和互動式使用者介面，尤其是在觸控裝置上。瞭解各種觸控事件以及如何管理它們，使我們能夠為網站或應用程式使用者提供輕鬆的使用者體驗。