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

Question

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

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

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

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

Answer 1

这个问题是因为在HTML5中onDrag和其他拖动相关的事件都是为拖放元素而设计的。它只能在阻力和火力下发射丢弃上下文。

要在画布中实现拖动行为，我使用了经典

  

mousedown，mouseup和mousemove事件

并使用

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

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