React，如何防止拖动后执行click事件？

import React, { useState } from 'react';

const MyComponent = () => {
  const [isDragging, setIsDragging] = useState(false);

  const handleTouchStart = () => {
    setIsDragging(true);
  };

  const handleTouchMove = () => {
    setIsDragging(true);
  };

  const handleClick = () => {
    if (!isDragging) {
      // 执行click事件的逻辑
    }
    setIsDragging(false);
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onClick={handleClick}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';

const MyComponent = () => {
  const [isDragging, setIsDragging] = useState(false);

  const handleMouseDown = () => {
    setIsDragging(true);
  };

  const handleMouseUp = () => {
    setIsDragging(false);
    setTimeout(() => {
      if (!isDragging) {
        // 执行click事件的逻辑
      }
    }, 200); // 设置延迟时间为200毫秒
  };

  return (
    <div
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;