React，如何防止在拖动后执行单击事件？答案

【问题标题】：React, How to prevent execution of click event after drag?React，如何防止在拖动后执行单击事件？
【发布时间】：2021-03-05 14:40:36
【问题描述】：

我有 Draggable 元素，在其中，我有一个带有 onClick 事件的组件。拖动结束时触发点击事件。我的可拖动元素看起来像这样。我使用了一个名为 react-draggable 的包。

<Draggable
    position={this.state.realPosition}
    onStart={this.handleStart}
    onDrag={this.handleDrag}
    onStop={this.handleStop}
    disabled={this.state.isDialogOpen}
    bounds="parent">
      <div style={{"width":"fit-content"}}>
        <Helmet getDialogStatus={this.handleClick} />  
      </div>
</Draggable>

我在 Helmet 组件中有 onClick 事件，它会打开一个对话框。当我拖动并释放元素时，将打开此对话框。我的问题是如何防止这种行为以及如何将这些行为分开？

谢谢。

【问题讨论】：

标签： reactjs onclick drag-and-drop draggable

【解决方案1】：

const [isDragging, setIsDragging] = useState<any>(false);

const eventControl = (event: { type: any; }, info: any) => {


    if (event.type === 'mousemove' || event.type === 'touchmove') {
      setIsDragging(true)
    }

    if (event.type === 'mouseup' || event.type === 'touchend') {
      setTimeout(() => {
        setIsDragging(false);
      }, 100);

    }
  }

然后，

<Draggable
    bounds="parent"
    onDrag={eventControl}
    onStop={eventControl}
> ...

【讨论】：

这个答案解决了我的问题，但我需要为移动浏览器添加“touchmove”和“touchend”事件。

【解决方案2】：

我会在持有 Draggable、isDragging 的组件中设置一个状态并将其传递给 Helmet 组件。

如果 isDragging 则禁用任何点击事件。

【讨论】：

我用你的想法解决了这个问题。正如你所说，我通过道具发送了它，如果拖动完成，我禁用了点击事件。之后，在 this.handleStop 函数中，我设置了 100ms 超时并再次启用点击事件。这对我有用。感谢您的帮助。
很好 @İbrahimAkar 很高兴听到它有帮助:)

【解决方案3】：

尝试通过使用事件对象在this.handleDrag 和this.handleStop 事件处理程序中使用event.stopPropagation();。他们可能会解决您的问题。

【讨论】：