React 基础面试题, React 的触摸事件有哪些?

Step 1

Q:: React 的触摸事件有哪些？

A:: React 提供了一些内置的触摸事件处理器，用于处理触摸屏设备上的用户交互。主要的触摸事件包括：

1. onTouchStart``: 当手指触摸屏幕时触发。 2. onTouchMove``: 当手指在屏幕上滑动时触发。 3. onTouchEnd``: 当手指从屏幕上移开时触发。 4. onTouchCancel``: 当触摸事件因外部原因被取消时触发，例如来电打断。

这些触摸事件通常与移动设备的用户交互相关，React 通过标准的事件合成机制来支持这些触摸事件。

Step 2

Q:: React 的触摸事件和鼠标事件有何区别？

A:: 触摸事件和鼠标事件在许多方面是相似的，但有几个重要的区别：

1. **触发方式**: 触摸事件专为触摸屏设备设计，鼠标事件则适用于桌面设备。 2. **多点触控**: 触摸事件支持多点触控，而鼠标事件通常只支持单点。 3. **事件类型**: 触摸事件包括 onTouchStart``, onTouchMove``, onTouchEnd``, onTouchCancel，而鼠标事件包括 onMouseDown``, onMouseMove``, onMouseUp``, onClick 等。 4. **事件对象**: 触摸事件的事件对象包含一个 touches 列表，表示当前屏幕上所有的触摸点；而鼠标事件的事件对象则只包含单个点的信息。

Step 3

Q:: 如何处理 React 中的触摸事件与滚动事件冲突？

A:: 在处理触摸事件时，尤其是在移动设备上，触摸事件与滚动事件可能会产生冲突。例如，当用户在一个可滚动的列表上滑动时，触摸事件和滚动事件可能会同时触发。

要处理这种冲突，可以使用以下几种方法：

1. **阻止默认行为**: 在 onTouchMove 中调用 event.preventDefault() 来阻止默认的滚动行为。 2. **判断滑动方向**: 通过判断用户滑动的方向，来决定是触发自定义的触摸事件逻辑还是触发默认的滚动行为。 3. **使用 passive event listeners**: 在某些情况下，可以通过设置触摸事件的监听器为 passive 来提高性能和用户体验。