Javascript 我怎样才能避免调整大小的酒吧变得如此浮躁？

基本上，我想让大小调整栏在我移动光标时移动，只要我聚焦在它上面。我这么做了，但问题是它有问题。它一次返回到原始状态，另一次跟随光标。我不想让它那样做

let slider=document.querySelector（“.slider”）；
let container=document.querySelector（“.container”）
让contone=document.querySelector（“.contone”）；
设conttwo=document.querySelector（“.conttwo”）；
let=false；
slider.addEventListener（“鼠标向下”，函数（e）{
单击=真；
slider.style.left+=e.offsetX+“px”；
})
container.addEventListener（“mousemove”，函数（e）{
如果（单击）{
slider.style.left=e.offsetX+“px”
console.log（“光标为”+e.offsetX）
log（“元素是”+slider.style.left）
}
})
container.addEventListener（“mouseup”，function（））{
单击=假；
})

.Container{
位置：相对位置；
宽度：500px；
高度：300px；
溢出：隐藏；
}
康通先生{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：-11；
溢出：隐藏；
}
.contone img{
位置：相对位置；
}
康托先生{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：-11111；
溢出：隐藏；
}
img{
宽度：100%；
身高：100%；
}
.滑块{
光标：ew调整大小；
背景色：黑色；
不透明度：0.5；
宽度：1%；
z指数：9999；
身高：100%；
位置：相对位置；
}

文件

.offsetX

是鼠标相对于元素的位置，因此使滑块跳跃

.clientX

是相对于文档的鼠标位置

但是，为了使用clientX，需要减去滑块的原始x位置。我将假定

.Container

始终是滑块的容器。通过使用

getBoundingClientRect（）

（这是一个需要时间的操作），我可以从所述容器中获取x位置（.left）

let slider=document.querySelector（“.slider”）；
let container=document.querySelector（“.container”）
让contone=document.querySelector（“.contone”）；
设conttwo=document.querySelector（“.conttwo”）；
let=false；
slider.addEventListener（“鼠标向下”，函数（e）{
单击=真；
})
container.addEventListener（“mousemove”，函数（e）{
如果（单击）{
更新SliderPosition（e.clientX）；
console.clear（）；
log（“光标为”+e.clientX）；
log（“元素是”+slider.style.left）；
}
})
函数updateSliderPosition（值）{
let box=container.getBoundingClientRect（）；
slider.style.left=值-box.left+“px”；
}
container.addEventListener（“mouseup”，function（））{
单击=假；
})

.Container{
位置：相对位置；
宽度：500px；
高度：300px；
溢出：隐藏；
}
康通先生{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：-11；
溢出：隐藏；
}
.contone img{
位置：相对位置；
}
康托先生{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：-11111；
溢出：隐藏；
}
img{
宽度：100%；
身高：100%；
}
.滑块{
光标：ew调整大小；
背景色：黑色；
不透明度：0.5；
宽度：1%；
z指数：9999；
身高：100%；
位置：相对位置；
}

文件

我的方法是使用平移来移动滑块，通常认为平移对于动画来说比绝对定位更好

我还在鼠标事件上使用指针事件。这些功能与鼠标事件相同，但也适用于触摸设备。它们还允许使用

setPointerCapture

，这意味着一旦我们单击滑块，它将接收所有事件，直到我们释放它（我们在鼠标手柄中执行此操作）。您可以在演示中看到，即使指针超出图像，您仍然可以移动滑块

let slider=document.querySelector（“滑块”）；
让container=document.querySelector（“#container”）；
设滑块宽度=container.offsetWidth*（1/100）；
设maxWidth=container.offsetWidth-sliderWidth；
设lastX=0；
设thisX=0；
设leftEdge=0；
函数mouseDownHandler（e）{
lastX=e.clientX；
slider.addEventListener（'pointermove'，mouseMoveHandler）；
slider.setPointerCapture（即指针ID）；
}
函数mouseMoveHandler（e）{
thisX=e.clientX；
xDiff=thisX-lastX；
leftEdge=Math.min（maxWidth，Math.max（0，leftEdge+xDiff））；
slider.style.transform=`translate（${leftEdge}px）`；
lastX=thisX；
}
功能鼠标器（e）{
slider.removeEventListener（'pointermove'，mouseMoveHandler）；
slider.releasePointerCapture（即指针ID）；
}
slider.addEventListener（“pointerdown”，mouseDownHandler）；
slider.addEventListener（“pointerup”，鼠标手柄）

.Container{
位置：相对位置；
宽度：500px；
高度：300px；
溢出：隐藏；
}
康顿先生，
康托先生{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
}
康通先生{
z指数：-11；
}
康托先生{
z指数：-11111；
}
img{
宽度：100%；
身高：100%；
}
.滑块{
光标：ew调整大小；
背景色：红色；
不透明度：0.5；
宽度：1%；
z指数：9999；
身高：100%；
位置：相对位置；
}

噢。我现在明白了。非常感谢。我以前没想过。非常感谢。