React中onMouseDown触发后onMouseOver无法触发问题解决方案咨询——实现类谷歌表格/Excel单元格拖拽高亮效果

你遇到的问题核心是浏览器默认的文本选择/拖拽行为干扰了事件正常触发：当在单元格上按住鼠标左键时，浏览器会自动启动文本选择模式，这会抢占事件优先级，导致后续的onMouseOver无法按预期触发，同时光标会变成文本选择样式（看起来类似禁用状态）。下面是具体的解决步骤和修改后的代码：

核心解决思路 #

• 阻止mousedown的默认行为，禁用浏览器自带的文本选择和默认拖拽逻辑
• 维护一个拖拽状态，标记当前是否处于拖动选中的过程中
• 在全局（document级别）监听mouseup事件，确保即使鼠标移出表格范围，也能正常停止拖拽状态
• 基于拖拽状态实现单元格的高亮逻辑

修改后的代码示例 #

import React, { useRef, useState } from 'react'

function Test() {
  const myTable = useRef(null)
  // 标记是否处于拖拽状态
  const [isDragging, setIsDragging] = useState(false)
  // 存储选中的单元格唯一标识
  const [selectedCells, setSelectedCells] = useState(new Set())

  // 处理鼠标按下事件
  const handleMouseDown = (e, rowIndex, colIndex) => {
    e.preventDefault() // 关键操作：阻止浏览器默认行为
    setIsDragging(true)
    const cellKey = `${rowIndex}-${colIndex}`
    // 初始化选中当前单元格
    setSelectedCells(new Set([cellKey]))
  }

  // 处理鼠标移动事件
  const handleMouseOver = (e, rowIndex, colIndex) => {
    if (!isDragging) return
    const cellKey = `${rowIndex}-${colIndex}`
    // 拖拽过程中，将路过的单元格加入选中集合
    setSelectedCells(prev => {
      const newSet = new Set(prev)
      newSet.add(cellKey)
      return newSet
    })
  }

  // 处理鼠标松开事件
  const handleMouseUp = () => {
    setIsDragging(false)
    // 如果需要保留选中状态可以注释下面一行，否则清空选中
    // setSelectedCells(new Set())
  }

  // 判断单元格是否被选中
  const isCellSelected = (rowIndex, colIndex) => {
    return selectedCells.has(`${rowIndex}-${colIndex}`)
  }

  return (
    <>
      <table ref={myTable} onMouseUp={handleMouseUp}>
        <tbody>
          { [...Array(4)].map((row, rowIndex) => (
            <tr key={rowIndex}>
              { [...Array(4)].map((col, colIndex) => (
                <td 
                  key={`${rowIndex}-${colIndex}`}
                  style={{ 
                    border: '1px black solid', 
                    width: '100px', 
                    height: '100px',
                    backgroundColor: isCellSelected(rowIndex, colIndex) ? '#cce7ff' : 'transparent',
                    cursor: isDragging ? 'crosshair' : 'default'
                  }}
                  onMouseDown={(e) => handleMouseDown(e, rowIndex, colIndex)}
                  onMouseOver={(e) => handleMouseOver(e, rowIndex, colIndex)}
                >
                </td>
              )) }
            </tr>
          )) }
        </tbody>
      </table>
      {/* 全屏透明层：确保鼠标移出表格后松开仍能停止拖拽 */}
      {isDragging && (
        <div 
          style={{ position: 'fixed', inset: 0, zIndex: -1 }}
          onMouseUp={handleMouseUp}
        />
      )}
    </>
  )
}

export default Test

关键细节说明 #

1. e.preventDefault()的作用：这是解决问题的核心，它直接阻止了浏览器的文本选择、默认拖拽等行为，让mouseover事件能正常触发，同时光标也不会变成文本选择样式。
2. 全局mouseup监听：添加的全屏透明div，保证了即使鼠标移出表格区域后松开左键，也能触发状态重置。你也可以通过useEffect给document绑定/解绑mouseup事件，效果一致。
3. 选中状态管理：用Set存储选中单元格的唯一键值，避免重复选中，同时方便快速判断单元格是否处于选中状态。如果需要实现类似Excel的矩形范围选择，只需要基于起始单元格坐标和当前单元格坐标，计算出所有需要选中的单元格即可替换当前的handleMouseOver逻辑。

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