javascript - react 合成事件 : onDrag doesn't fire after onClick or onContextMenu is called

Question

我正在开发一个使用 Canvas 绘图的 React 应用程序。我正在尝试检测这样的拖动:

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

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

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

Answer 1

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

为了在 Canvas 中实现拖动行为，我使用了经典

mousedown, mouseup and mousemove events

和使用

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

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