我具有以下功能:
_onDrag(e) {
console.log("On Drag: "+e.clientY);
}
_onDragStart(e) {
console.log("Drag Start: "+e.clientY);
}
_onDragEnd(e) {
console.log("Drag End: "+e.clientY);
}
我将它们应用于我名为Canvas
的React组件:
<Canvas
onDrag={this._onDrag.bind(this)}
onDragStart={this._onDragStart.bind(this)}
onDragEnd={this._onDragEnd.bind(this)}
/>
,然后在Canvas
中,将它们放在普通的HTML画布上:
<canvas
ref="canvas"
draggable="true"
onDrag={this.props.onDrag}
onDragStart={this.props.onDragStart}
onDragEnd={this.props.onDragEnd}
/>
但是,当我在画布上拖动拖放时,我的函数会给出以下输出:
拖动开始:600 2index_bundle.js:26414拖动时:486 40index_bundle.js:26414拖动时:483 4index_bundle.js:26414拖动时: 482 4index_bundle.js:26414开拖动:479 4index_bundle.js:26414开 拖曳:473 4index_bundle.js:26414拖曳:467 4index_bundle.js:26414 拖动时:461 4index_bundle.js:26414拖动时:453 4index_bundle.js:26414拖动时:448 4index_bundle.js:26414拖动时: 443 2index_bundle.js:26414开拖动:437 4index_bundle.js:26414开 拖曳:433 4index_bundle.js:26414拖曳:430 4index_bundle.js:26414 拖动时:427 2index_bundle.js:26414拖动时:424 4index_bundle.js:26414拖动时:420 2index_bundle.js:26414拖动时: 417 4index_bundle.js:26414开拖动:413 2index_bundle.js:26414开 拖曳:410 4index_bundle.js:26414拖曳:407 2index_bundle.js:26414 拖动时:403 2index_bundle.js:26414拖动时:399 4index_bundle.js:26414拖动时:394 2index_bundle.js:26414拖动时: 390 2index_bundle.js:26414开拖动:386 2index_bundle.js:26414开 拖曳:381 4index_bundle.js:26414拖曳:378 2index_bundle.js:26414 拖动时:374 2index_bundle.js:26414拖动时:369 2index_bundle.js:26414拖动时:366 4index_bundle.js:26414拖动时: 364 2index_bundle.js:26414开拖动:359 4index_bundle.js:26414开 拖曳:356 6index_bundle.js:26414拖曳:353 6index_bundle.js:26414 拖动时:351 6index_bundle.js:26414拖动时:350 6index_bundle.js:26414拖动时:348 6index_bundle.js:26414拖动时: 347 29index_bundle.js:26414开拖动:346 index_bundle.js:26414开 拖动:0 index_bundle.js:26424拖动结束:1168
onDragEnd
的值太远了(1168 !!)
相关地,同样有趣的是,在onDragStart
处的值是600
,而一旦我拖动,它就会跳到479
。onDrag
的末尾将值设置为0
有人可以向我解释吗?