我有一个svg矩形,它的4个边上有4个大小调整,矩形和大小调整都有它们的onmousedown/onmousemove/onmouseup事件侦听器。
当我从大小调整中调整矩形大小时,当我停止调整元素大小时,大小调整的onmousemove不会停止,或者onmouseup可能没有被触发。
下面是我的代码:
用于拖放的矩形事件:
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,
});
}
用于调整矩形大小的resizer事件:
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);
}
}
我做错了什么?它如何修复它呢?
发布于 2019-05-17 06:11:44
在使用document.removeEventListener的地方尝试使用settimeout,如下所示:
setTimeout(() => {
document.removeEventListener('mousemove', this.onMouseMove.bind(this));
}, 500);
onmousedown = (e) => {
console.log("D>>>>>", e);
}
onmousemove = (e) => {
console.log("M>>>>>", e);
}
onmouseup = (e) => {
console.log("U>>>>>", e);
}
https://stackoverflow.com/questions/56176722
复制相似问题