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

时间:2017-12-06 11:10:16

标签: javascript html reactjs html5-canvas

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

  

mousedown,mouseup和mousemove事件

并使用

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

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