React合成事件：onClick或onContextMenu被调用后onDrag不会触发

Posted 2021-04-15

我正在开发一个使用画布图的React应用程序。我试图像这样检测拖动：

<canvas className="mycanvas" onDrag ={this.moveObj} onDragStart={this.startMoving} onDragEnd={this.stopMoving} onDoubleClick={this.createSelectedObj}  ref={(mycanvas)=>{this.mycanvas= mycanvas;} }></canvas>

我可以拖动对象直到我点击或右键单击画布。单击或右键单击后，如果我尝试拖动它不会触发。它只在我双击画布后才会触发。

有谁知道这里出了什么问题？

答案

这个问题是因为在html5中onDrag和其他拖动相关的事件都是为拖放元素而设计的。它仅在拖放上下文中触发。

要在canvas中实现拖动行为，我使用了classic

mousedown，mouseup和mousemove事件

和使用

onDragStart={(e)=>{e.preventDefault();} 

防止在拖放上下文下拖动。