reactjs - React,如何防止在拖动后执行单击事件?
问题描述
我有 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 事件,它打开一个对话框。当我拖动并释放元素时,将打开此对话框。我的问题是如何防止这种行为以及如何将这些行为分开?
谢谢。
解决方案
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}
> ...
推荐阅读
- r - 如何从 debian 中的 RStudio 服务器连接到 SQL Server?
- c - 使用操作文件制作程序
- python - 那么不能使用 weasyprint 怎么办呢?
- node.js - 想在 $match 函数中使用 $lookup 数据
- node.js - 如何在共享主机上启动 Laravel 应用程序(Bluehost)
- android - 将视频下载到内部存储
- c# - 嵌套子 REST 控制器,ASP.NET .net5
- swift - 如何切换 int 变量的值
- ms-word - PhpWord:加载模板并保存为 Word Doc 删除表格/单元格边框
- regex - 语言参数的 Nginx URL 重写