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】:我会在持有 Draggable
、isDragging
的组件中设置一个状态并将其传递给 Helmet 组件。
如果 isDragging 则禁用任何点击事件。
【讨论】:
我用你的想法解决了这个问题。正如你所说,我通过道具发送了它,如果拖动完成,我禁用了点击事件。之后,在 this.handleStop 函数中,我设置了 100ms 超时并再次启用点击事件。这对我有用。感谢您的帮助。 很好 @İbrahimAkar 很高兴听到它有帮助:)【参考方案3】:尝试通过使用事件对象在this.handleDrag
和this.handleStop
事件处理程序中使用event.stopPropagation();
。他们可能会解决您的问题。
【讨论】:
以上是关于React,如何防止在拖动后执行单击事件?的主要内容,如果未能解决你的问题,请参考以下文章
在 React 中拖动 Div 中的图像时如何防止在新选项卡中打开