Javascript 不正确的事件目标

我正在创建一个选择器插件（它可以将活动类设置为多个元素）

算法：

onMouseDown

创建元素

onMouseMove

当

onMouseDown

移动到我想要选择的元素时，我创建的元素会改变大小

onMouseUp

获取事件目标并施展魔法

这是简短的版本由于简短，但我有一个问题，以获得适当的事件目标。当我移动到右侧和底部/顶部（我的x轴为正）时，我得到了正确的事件目标。但是当我的x轴为负时，我总是得到改变大小的元素，而不是我需要的元素

const container=document.querySelector（'.container'）；
让选择器=null；
container.addEventListener（'mousedown'，（e）=>{
选择器=document.createElement（'div'）；
selector.style.position='fixed'；
selector.style.border='1px蓝色虚线'；
selector.style.width='1px'；
selector.style.height='1px'；
selector.style.left=e.clientX+'px'
selector.style.top=e.clientY+'px'
selector.className=“selector”；
container.appendChild（选择器）；
常量mouseDownClientX=e.clientX；
const mouseDownClientY=e.clientY；
document.onmousemove=e=>{
渲染选择器（e、mouseDownClientX、mouseDownClientY）；
}
document.onmouseup=e=>{
console.log（如target）；
选择器。移除（）；
}
});
函数renderselector（e、mouseDownClientX、mouseDownClientY）{
const top=Math.min（e.clientY，mouseDownClientY）；
const left=Math.min（e.clientX，mouseDownClientX）
const width=Math.abs（e.clientX-mouseDownClientX）；
const height=Math.abs（e.clientY-mouseDownClientY）；
selector.style.width=宽度+px；
selector.style.height=高度+px；
selector.style.top=top+'px'；
selector.style.left=left+'px'；
}

*{
填充：0px；
边际：0px；
框大小：边框框；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
柔性包装：包装；
宽度：50vw；
高度：100vh；
保证金：0自动；
边框：1px纯色灰色；
}
.项目{
填充：20px；
flex:050px；
边框：1px纯色灰色；
}

需要将我的选择器的z索引更改为小于我的div。

因此选择器在覆盖它时不会更改项目的尺寸，对吗？这是因为你没有得到正确的物品目标？@AnthonyGedeon当onMouseUp事件被触发时，我需要得到带有物品类名的div的e.target，我会这样做，但是，只有当我的x轴为正时（通过onMouseMove事件向右移动）。当我执行onmouse时，从onMouseDown向左移动e.target始终是一个带有选择器类名的项