允许EventListener获取pageX和PageY，而不将其保持在元素的顶部

Question

所以我在mousedown上有一个基本滑块，它添加了另一个事件来检查移动mousemove

这一切都如预期的那样工作，但我想让滑块元素不断改变它的x值，即使鼠标不在元素的顶部

例如：在YouTube上，转到任何视频，按住时间线进度条，在y轴上移动鼠标，然后在x轴上移动，你可能会注意到你不必在时间线元素的顶部就可以继续移动它。

我正试图得到类似的效果在这里

我问这个问题是因为我不知道该搜索什么，也不知道如何解决

代码：

const sliderElement = document.getElementById("slider");
const conH = document.getElementsByClassName("con-h")[0]
conH.addEventListener("mousedown", function(event){
conH.addEventListener("mousemove", function(event){
let x = event.clientX;
sliderElement.style.width = x + "px"
})
});

.con-h{
width: 100px;
height: 30px;
background-color: red;
}
#slider{
width: 40px;
height: 30px;
background-color: darkblue;
}

<div class="con-h">
<div id="slider">
</div>

Answer 1

在后台创建一个div，只需从后台div中获取鼠标的X位置。取消注释background-color: green;即可查看完整大小。

const sliderElement = document.getElementById("slider");
const conH = document.getElementsByClassName("con-h")[0]
const bg = document.getElementsByClassName("bg")[0];
conH.addEventListener("mousedown", function() {
bg.addEventListener("mousemove", function(event) {
let x = event.clientX;
if (x < 101) {
sliderElement.style.width = `${x}px`
}
})
});

.con-h {
width: 100px;
height: 30px;
background-color: red;
}
#slider {
width: 40px;
height: 30px;
background-color: darkblue;
}
.bg {
width: 1000px;
height: 1000px;
# This is just to show how big the BG Element is,
# in normal use it would have no bg-color
#background-color: green;
}

<div class="bg">
<div class="con-h">
<div id="slider">
</div>
</div>

Answer 2

正如t.niese所说，您可以监听身体的mousemove事件。

此外，您还必须计算滑块在页面中的位置。

还有一条建议：不要在另一个事件处理程序中注册事件处理程序。它总是导致一些奇怪的问题。

const sliderElement = document.getElementById("slider");
const conH = document.getElementsByClassName("con-h")[0]
// Use a flag to know if the slider is active
let sliderActive = false
// Slider's handler
conH.addEventListener("mousedown", function(event) {
sliderActive = !sliderActive
});
// Body handler to deactivate slider
document.documentElement.addEventListener("mousedown", function(event){
if(sliderActive && event.target !== conH && event.target !== sliderElement){
sliderActive = false
}
})
// Body handler to set slider value
document.documentElement.addEventListener("mousemove", function(event) {
let x = event.clientX;
const conHLeft = Math.round(conH.getBoundingClientRect().left)
if (sliderActive) {
sliderElement.style.width = (x - conHLeft) + "px"
}
})

.con-h {
width: 100px;
height: 30px;
background-color: red;
overflow: hidden;  /* To avoid the slider grow bigger than its container */
}
#slider {
width: 40px;
height: 30px;
background-color: darkblue;
}

<div class="con-h">
<div id="slider">
</div>
</div>