我有一個(gè)svg矩形，其4個(gè)邊上有4個(gè)resizer，矩形和resizer都有onmousedown / onmousemove / onmouseup事件監(jiān)聽器。當(dāng)我從調(diào)整器調(diào)整矩形大小時(shí)，當(dāng)我停止調(diào)整元素大小或者可能沒有觸發(fā)onmouseup時(shí)，大小調(diào)整器的onmousemove不會(huì)停止。這是我的代碼：用于拖放的矩形事件： onMouseDown = (e) => {
if ( this.state.isDraggable ) {
document.addEventListener('mousemove', this.onMouseMove);
this.coords = {
x: e.clientX,
y: e.clientY
}
}
}
onMouseUp = (e) => {
// this.props.updateStateDragging(this.props.id, false);
document.removeEventListener('mousemove', this.onMouseMove);
this.coords = {};
}
onMouseMove = (e) => {
const xDiff = this.coords.x - e.clientX;
const yDiff = this.coords.y - e.clientY;
this.coords.x = e.clientX;
this.coords.y = e.clientY;
this.setState({
x: this.state.x - xDiff,
y: this.state.y - yDiff,
});
}用于調(diào)整矩形大小的縮放器事件： onMouseDown = (e) => {
document.addEventListener('mousemove', this.onMouseMove);
this.props.updateStateResizing(this.props.id, true);
this.props.updateStateDragging(this.props.id, false);
}
onMouseMove = (e) => {
if ( this.props.isResizing ){
this.props.nodeResizer(this.props.id, e.target, e.clientX, e.clientY);
}
}
onMouseUp = (e) => {
document.removeEventListener('mousemove', this.onMouseMove.bind(this));
if ( this.props.isResizing ){
this.props.updateStateResizing(this.props.id, false);
}
}我究竟做錯(cuò)了什么？怎么解決呢？
onMouseMove不退出或onMouseUp不起作用
胡子哥哥
2019-04-26 14:15:49
