react如何禁用鼠标

禁用鼠标事件的实现方法

在React中禁用鼠标事件可以通过多种方式实现，以下是几种常见方法：

阻止默认行为和冒泡 通过阻止事件的默认行为和冒泡来禁用鼠标交互：

function handleClick(e) {
  e.preventDefault();
  e.stopPropagation();
}

<div onClick={handleClick}>不可点击的元素</div>

使用CSS指针事件 通过CSS的pointer-events属性完全禁用鼠标交互：

<div style={{ pointerEvents: 'none' }}>禁用鼠标的元素</div>

条件渲染事件处理器 根据条件动态决定是否处理事件：

function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <button 
      onClick={!isDisabled ? handleClick : undefined}
      disabled={isDisabled}
    >
      按钮
    </button>
  );
}

高阶组件封装 创建高阶组件来统一处理禁用逻辑：

function withDisabled(WrappedComponent) {
  return function({ disabled, ...props }) {
    return (
      <WrappedComponent 
        {...props}
        onClick={disabled ? undefined : props.onClick}
        style={{ ...props.style, pointerEvents: disabled ? 'none' : 'auto' }}
      />
    );
  };
}

禁用特定鼠标事件

禁用右键菜单 阻止上下文菜单事件：

<div onContextMenu={(e) => e.preventDefault()}>
  禁用右键菜单的区域
</div>

禁用文本选择 防止鼠标选择文本：

<div style={{ userSelect: 'none' }}>
  不可选中的文本
</div>

全局禁用鼠标事件

文档级事件阻止 在useEffect中全局阻止事件：

useEffect(() => {
  const handler = (e) => e.preventDefault();
  document.addEventListener('mousedown', handler);
  return () => document.removeEventListener('mousedown', handler);
}, []);

无障碍访问考虑

当禁用鼠标交互时，应确保：

• 为屏幕阅读器添加适当的ARIA属性
• 提供替代的键盘操作方式
• 通过aria-disabled而非disabled属性处理自定义元素

<div 
  role="button"
  aria-disabled="true"
  tabIndex="-1"
  style={{ pointerEvents: 'none' }}
>
  禁用的按钮
</div>