Allow EventListener to get pageX and PageY without keeping it on top the element-CodePudding

so I have a basic slider on mousedown it adds another event to check the movement mousemove

It's all working as expected, but I want to make the slider element keeps changing it's x value even if the mouse isn't on top of the element

for example: On YouTube, go to any video and hold down the timeline progress bar and move your mouse on the y-axis's and then move on x-axis's, you might notice that you don't have be on top of the timeline element to keep moving it.

I'm trying to get a similar effect here.

I'm asking this question because I don't know what to search for, or how can I solve it

code:

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 >
<div id="slider">
</div>

CodePudding user response：

Create a div in the background and just get the mouse's X position from the background div. Uncomment the background-color: green; to see the full size.

const sliderElement = document.getElementById("slider");
const conH = document.getElementsByClassName("con-h")[0]
const bg = document.getElementsByClassName("bg")[0];
conH.addEventListener("mousedown", function(event){
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;
#background-color: green;
}

<div >
<div >
<div id="slider">
</div>
</div>

CodePudding user response：

Like t.niese said, you could listen to the mousemove event of the body.

Additionnally, you have to calculate the slider's position in the page.

And an advise: Do not register event handlers inside another one. It always leads to weird issues.

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 >
  <div id="slider">
  </div>
</div>