面试题：React在移动端开发中，如何处理触摸事件的多指操作及冲突问题？

Question

在React的移动端项目里，经常会遇到多指触摸操作，如双指缩放等。请说明如何在React中监听多指触摸事件，并且当多指操作事件与单指操作事件（如点击）发生冲突时，怎样通过合理的事件处理逻辑来确保应用交互的准确性和流畅性，给出具体实现思路和关键代码片段。

Answer 1

监听多指触摸事件

在React中，可以通过touchstart、touchmove和touchend等触摸事件来监听多指触摸操作。

1. 设置事件监听器：在组件的componentDidMount生命周期方法中添加事件监听器，在componentWillUnmount中移除监听器。

import React, { Component } from 'react';

class MultiTouchComponent extends Component {
  constructor(props) {
    super(props);
    this.handleTouchStart = this.handleTouchStart.bind(this);
    this.handleTouchMove = this.handleTouchMove.bind(this);
    this.handleTouchEnd = this.handleTouchEnd.bind(this);
  }

  componentDidMount() {
    document.addEventListener('touchstart', this.handleTouchStart);
    document.addEventListener('touchmove', this.handleTouchMove);
    document.addEventListener('touchend', this.handleTouchEnd);
  }

  componentWillUnmount() {
    document.removeEventListener('touchstart', this.handleTouchStart);
    document.removeEventListener('touchmove', this.handleTouchMove);
    document.removeEventListener('touchend', this.handleTouchEnd);
  }

  handleTouchStart(event) {
    // 这里可以获取触摸点数量，判断是否是多指触摸
    const touchCount = event.touches.length;
    if (touchCount >= 2) {
      // 处理多指触摸开始逻辑
    }
  }

  handleTouchMove(event) {
    const touchCount = event.touches.length;
    if (touchCount >= 2) {
      // 处理多指触摸移动逻辑，如双指缩放
      const touch1 = event.touches[0];
      const touch2 = event.touches[1];
      const dx = touch2.clientX - touch1.clientX;
      const dy = touch2.clientY - touch1.clientY;
      // 根据dx和dy计算缩放比例或其他操作
    }
  }

  handleTouchEnd(event) {
    const touchCount = event.touches.length;
    if (touchCount >= 2) {
      // 处理多指触摸结束逻辑
    }
  }

  render() {
    return <div>Multi - Touch Component</div>;
  }
}

export default MultiTouchComponent;

处理事件冲突

1. 使用状态标识：通过一个状态变量来标识当前是否正在进行多指操作。

import React, { Component } from 'react';

class ConflictComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isMultiTouch: false
    };
    this.handleTouchStart = this.handleTouchStart.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleTouchStart(event) {
    if (event.touches.length >= 2) {
      this.setState({ isMultiTouch: true });
    }
  }

  handleTouchEnd(event) {
    this.setState({ isMultiTouch: false });
  }

  handleClick() {
    if (!this.state.isMultiTouch) {
      // 处理单指点击逻辑
    }
  }

  componentDidMount() {
    document.addEventListener('touchstart', this.handleTouchStart);
    document.addEventListener('touchend', this.handleTouchEnd);
  }

  componentWillUnmount() {
    document.removeEventListener('touchstart', this.handleTouchStart);
    document.removeEventListener('touchend', this.handleTouchEnd);
  }

  render() {
    return <div onClick={this.handleClick}>Click or Multi - Touch Component</div>;
  }
}

export default ConflictComponent;

2. 事件委托与捕获：利用事件冒泡和捕获机制，在父元素上监听触摸事件，在子元素上监听点击事件。在触摸事件的处理函数中，如果是多指触摸则阻止事件冒泡，防止单指点击事件被触发。

import React, { Component } from 'react';

class EventDelegationComponent extends Component {
  constructor(props) {
    super(props);
    this.handleParentTouchStart = this.handleParentTouchStart.bind(this);
    this.handleChildClick = this.handleChildClick.bind(this);
  }

  handleParentTouchStart(event) {
    if (event.touches.length >= 2) {
      event.stopPropagation();
    }
  }

  handleChildClick() {
    // 处理单指点击逻辑
  }

  render() {
    return (
      <div onTouchStart={this.handleParentTouchStart}>
        <button onClick={this.handleChildClick}>Click Me</button>
      </div>
    );
  }
}

export default EventDelegationComponent;