如何使用JavaScript将鼠标事件重写为触摸事件

核心映射规则 #

完全对齐Chrome移动端调试视图的事件映射逻辑：

• mousedown 对应触发 touchstart
• mousemove 对应触发 touchmove
• mouseup/mouseleave 对应触发 touchend

触发触摸事件后会阻断原鼠标事件的传播与默认行为，不会同时触发两类事件。

代码实现（自定义Hook） #

可以直接复用以下自定义Hook，全局或局部启用模拟能力：

import { useEffect } from 'react';

/**
 * 鼠标事件转触摸事件模拟Hook，对齐Chrome移动端模拟表现
 * @param {boolean} enabled 是否启用模拟
 */
const useTouchEmulation = (enabled = true) => {
  useEffect(() => {
    // 原生触摸设备直接跳过，避免冲突
    if (!enabled || 'ontouchstart' in window) return;

    // 构造符合W3C标准的Touch对象
    const generateTouchInstance = (mouseEvent) => ({
      identifier: Date.now(),
      target: mouseEvent.target,
      clientX: mouseEvent.clientX,
      clientY: mouseEvent.clientY,
      pageX: mouseEvent.pageX,
      pageY: mouseEvent.pageY,
      screenX: mouseEvent.screenX,
      screenY: mouseEvent.screenY,
    });

    // 分发原生触摸事件
    const emitTouchEvent = (eventType, mouseEvent) => {
      const touch = generateTouchInstance(mouseEvent);
      const touchEvent = new TouchEvent(eventType, {
        bubbles: true,
        cancelable: true,
        touches: [touch],
        targetTouches: [touch],
        changedTouches: [touch],
        view: window,
      });
      
      // 阻断原鼠标事件，和Chrome表现一致
      mouseEvent.stopPropagation();
      mouseEvent.preventDefault();
      mouseEvent.target.dispatchEvent(touchEvent);
    };

    // 绑定事件映射
    const onMouseDown = (e) => emitTouchEvent('touchstart', e);
    const onMouseMove = (e) => emitTouchEvent('touchmove', e);
    const onMouseEnd = (e) => emitTouchEvent('touchend', e);

    document.addEventListener('mousedown', onMouseDown);
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseEnd);
    document.addEventListener('mouseleave', onMouseEnd);

    // 销毁时解绑事件
    return () => {
      document.removeEventListener('mousedown', onMouseDown);
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseEnd);
      document.removeEventListener('mouseleave', onMouseEnd);
    };
  }, [enabled]);
};

export default useTouchEmulation;

使用方式 #

如果需要全局启用，直接在项目根组件中调用即可：

// App.jsx 根组件
import useTouchEmulation from './hooks/useTouchEmulation';

function App() {
  // 全局启用触摸模拟
  useTouchEmulation(true);
  
  // 其余业务逻辑
  return <div className="app">{/* 业务内容 */}</div>;
}

如果只需要局部容器启用，将事件绑定逻辑中的document替换为对应容器的ref即可。

兼容说明 #

• 自动识别原生触摸设备，不会和系统原生触摸事件冲突
• 生成的TouchEvent完全符合W3C标准，可被所有支持触摸事件的第三方库正常识别
• 不会额外触发click、mouseup等鼠标衍生事件，和Chrome开发者工具移动端视图表现1:1对齐

内容的提问来源于stack exchange，提问作者JulienRioux