Javascript 可调整大小的对象无法正常工作本机js

在我的项目中，用户可以创建任意数量的对象并调整其大小。但是有一些bug会导致调整速度过快。当用户创建一个对象时，调整其大小，然后创建第二个对象并调整其大小，在调整第二个对象的大小后，返回到第一个对象，并且调整第一个对象的大小比鼠标移动速度快

//创建
函数create（）{
const workArea=document.querySelector（“.workArea”）；
让divParent=document.createElement（“div”）；
divParent.className=“divParent”；
设div=document.createElement（“div”）；
div.className=“div”；
divParent.appendChild（div）；
工作区。追加子项（divParent）；
var resizerNE=document.createElement（“div”）；
resizerNE.className=“resizerNE”；
resizerNE.classList.add（“resizer”）；
var resizerSE=document.createElement（“div”）；
resizerSE.className=“resizerSE”；
resizerSE.classList.add（“resizer”）；
var resizerSW=document.createElement（“div”）；
resizerSW.className=“resizerSW”；
resizerSW.classList.add（“resizer”）；
var resizerNW=document.createElement（“div”）；
resizerNW.className=“resizerNW”；
resizerNW.classList.add（“resizer”）；
divParent.appendChild（resizerNE）；
divParent.appendChild（resizerSE）；
divParent.appendChild（resizerSW）；
divParent.appendChild（resizerNW）；
//调整大小
让el；
const resizer=document.queryselectoral（“.resizer”）；
forEach（函数（thisresizer）{
thisresizer.addEventListener（“mousedown”，function（））{
el=this.parentNode；
});
});
让isresising=false；
const resizers=document.queryselectoral（“.resizer”）；
让电流调节器；
for（让重定器中的重定器）{
resizer.addEventListener（“mousedown”，mousedown）；
功能鼠标向下（e）{
currentResizer=e.target；
IsResising=true；
//控制台日志（el）；
设prevX=e.clientX；
设prevY=e.clientY；
window.addEventListener（“mousemove”，mousemove）；
window.addEventListener（“mouseup”，mouseup）；
函数mousemove（e）{
const rect=el.getBoundingClientRect（）；
if（currentResizer.classList.contains（“resizerSE”））{
el.style.width=rect.width-（prevX-e.clientX）+“px”；
el.style.height=rect.height-（prevY-e.clientY）+“px”；
}else if（currentResizer.classList.contains（“resizerSW”））{
el.style.width=rect.width+（prevX-e.clientX）+“px”；
el.style.height=rect.height-（prevY-e.clientY）+“px”；
el.style.left=rect.left-（prevX-e.clientX）+“px”；
}else if（currentResizer.classList.contains（“resizerNE”））{
el.style.width=rect.width-（prevX-e.clientX）+“px”；
el.style.height=rect.height+（prevY-e.clientY）+“px”；
el.style.top=rect.top-（prevY-e.clientY）+“px”；
}else if（currentResizer.classList.contains（“resizerNW”））{
el.style.width=rect.width+（prevX-e.clientX）+“px”；
el.style.height=rect.height+（prevY-e.clientY）+“px”；
el.style.top=rect.top-（prevY-e.clientY）+“px”；
el.style.left=rect.left-（prevX-e.clientX）+“px”；
}else if（currentResizer.classList.contains（“resizerN”））{
el.style.height=rect.height+（prevY-e.clientY）+“px”；
el.style.top=rect.top-（prevY-e.clientY）+“px”；
}else if（currentResizer.classList.contains（“Resizer”））{
el.style.width=rect.width-（prevX-e.clientX）+“px”；
}else if（currentResizer.classList.contains（“resizerS”））{
el.style.height=rect.height-（prevY-e.clientY）+“px”；
}else if（currentResizer.classList.contains（“resizerW”））{
el.style.width=rect.width+（prevX-e.clientX）+“px”；
el.style.left=rect.left-（prevX-e.clientX）+“px”；
}
el.children[0].style.width=el.style.width；
el.children[0].style.height=el.style.height；
//console.log（“prevX:+prevX+”prevY:+prevY）；
prevX=e.clientX；
prevY=e.clientY；
}
函数mouseup（）{
removeEventListener（“mousemove”，mousemove）；
removeEventListener（“mouseup”，mouseup）；
IsResising=false；
}
}
}
}

。工作区{
宽度：100%；
高度：100vh；
}
.divParent{
宽度：100px；
高度：100px；
位置：绝对位置；
背景：黑色
}
.分区{
背景：#555555；
}
.树脂{
宽度：12px；
高度：12px；
位置：绝对位置；
z指数：9999999；
边框：1px实心#2872c7；
边界半径：10px；
背景#f2f2；
框大小：边框框；
显示：块；
}
雷西泽先生{
右图：-6px；
底部：-6px；
光标：se调整大小；
}
雷西泽先生{
顶部：-6px；
右图：-6px；
光标：ne调整大小；
}
.resizerSW{
左-6px；
底部：-6px；
光标：sw调整大小；
}
雷西泽先生{
左-6px；
顶部：-6px；
光标：nw调整大小；
}

创建

最后，如果你喜欢答案，请投票并接受。除非我重新排列代码，否则我找不到问题所在。我认为你应该这样使用它。如果需要更多解释，请告诉我