React环境下无需jQuery实现鼠标按住拖拽及按住事件检测可行吗？

完全不需要依赖jQuery，React自带的合成事件系统就能轻松搞定鼠标按住检测和拖拽功能，我给你梳理一个清晰的实现思路和代码示例：

一、先搞定鼠标按住事件检测 #

要检测鼠标是否处于按住状态，我们可以通过React的onMouseDown、onMouseUp事件配合组件状态来实现，同时要注意处理鼠标移出元素后松开的场景：

import { useState, useEffect, useRef } from 'react';

function MouseHoldDemo() {
  const [isMouseDown, setIsMouseDown] = useState(false);
  const elementRef = useRef(null);

  // 鼠标按下时触发
  const handleMouseDown = () => {
    setIsMouseDown(true);
    // 给document绑定mouseup事件，防止鼠标移出元素后松开没触发
    document.addEventListener('mouseup', handleMouseUpGlobal);
  };

  // 全局鼠标松开事件
  const handleMouseUpGlobal = () => {
    setIsMouseDown(false);
    document.removeEventListener('mouseup', handleMouseUpGlobal);
  };

  // 组件卸载时清理事件监听
  useEffect(() => {
    return () => {
      document.removeEventListener('mouseup', handleMouseUpGlobal);
    };
  }, []);

  return (
    <div
      ref={elementRef}
      onMouseDown={handleMouseDown}
      style={{
        width: '200px',
        height: '200px',
        backgroundColor: isMouseDown ? '#ff4444' : '#4285f4',
        cursor: 'pointer'
      }}
    >
      {isMouseDown ? '鼠标按住中' : '点击并按住我'}
    </div>
  );
}

export default MouseHoldDemo;

二、实现鼠标拖拽功能 #

拖拽的核心是记录初始位置，然后在鼠标移动时计算偏移量更新元素位置。这里推荐用transform: translate()来修改位置，比直接改left/top性能更好（触发GPU加速）：

import { useState, useRef, useEffect } from 'react';

function DraggableBox() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isDragging, setIsDragging] = useState(false);
  const boxRef = useRef(null);
  const initialMousePos = useRef({ x: 0, y: 0 });

  // 鼠标按下，记录初始位置
  const handleMouseDown = (e) => {
    setIsDragging(true);
    initialMousePos.current = {
      x: e.clientX - position.x,
      y: e.clientY - position.y
    };
    // 给document绑定移动和松开事件
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  // 鼠标移动，计算新位置
  const handleMouseMove = (e) => {
    if (!isDragging) return;
    setPosition({
      x: e.clientX - initialMousePos.current.x,
      y: e.clientY - initialMousePos.current.y
    });
  };

  // 鼠标松开，结束拖拽
  const handleMouseUp = () => {
    setIsDragging(false);
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  // 组件卸载时清理事件
  useEffect(() => {
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, []);

  return (
    <div
      ref={boxRef}
      onMouseDown={handleMouseDown}
      style={{
        position: 'absolute',
        width: '200px',
        height: '200px',
        backgroundColor: '#4285f4',
        cursor: isDragging ? 'grabbing' : 'grab',
        transform: `translate(${position.x}px, ${position.y}px)`,
        transition: 'transform 0.05s ease'
      }}
    >
      {isDragging ? '拖拽中...' : '按住我拖拽'}
    </div>
  );
}

export default DraggableBox;

几个关键注意点 #

• 事件解绑很重要：一定要在鼠标松开或组件卸载时移除全局的mousemove和mouseup监听，否则会导致重复绑定，引发不必要的性能问题。
• 性能优化：使用transform代替left/top，因为transform不会触发浏览器的重排重绘，性能更优。
• 边界处理：如果需要限制拖拽范围，可以在handleMouseMove里判断新位置是否超出目标区域，再决定是否更新position。

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