React,如何防止在拖动后执行单击事件?

Posted

技术标签:

【中文标题】React,如何防止在拖动后执行单击事件?【英文标题】:React, How to prevent execution of click event after drag? 【发布时间】: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 事件,它会打开一个对话框。当我拖动并释放元素时,将打开此对话框。我的问题是如何防止这种行为以及如何将这些行为分开?

谢谢。

【问题讨论】:

【参考方案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】:

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

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

【讨论】:

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

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

【讨论】:

以上是关于React,如何防止在拖动后执行单击事件?的主要内容,如果未能解决你的问题,请参考以下文章

在 React 中拖动 Div 中的图像时如何防止在新选项卡中打开

React-draggable npm 包可防止在输入字段内单击

FullCalendar - 如何防止过去发生的事件被拖动

在鼠标单击期间防止键盘事件(未释放)

如何防止在拖动 UIPickerView 时触发按钮?

单击子锚点时,如何防止触发父级的 onclick 事件?