实现鼠标不在元素上方时仍可获取pageX/pageY的EventListener效果

你当前的滑块组件仅在鼠标停留在容器con-h内时才能响应拖拽，要实现类似YouTube进度条的全局拖拽效果，核心是把鼠标移动事件绑定到整个文档上，而非滑块容器，同时在鼠标松开时及时解绑事件，避免后续误触发。

修改后的实现代码 #

HTML

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

CSS

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

JavaScript

const sliderElement = document.getElementById("slider");
const conH = document.querySelector(".con-h");
const containerWidth = conH.offsetWidth;

// 拖拽时的处理逻辑
function handleMouseMove(event) {
  // 计算鼠标相对于容器左侧的偏移量
  const containerLeft = conH.getBoundingClientRect().left;
  let x = event.clientX - containerLeft;
  // 限制滑块宽度在0到容器宽度之间，避免超出边界
  x = Math.max(0, Math.min(x, containerWidth));
  sliderElement.style.width = `${x}px`;
}

// 鼠标松开时的清理逻辑
function handleMouseUp() {
  document.removeEventListener("mousemove", handleMouseMove);
  document.removeEventListener("mouseup", handleMouseUp);
}

conH.addEventListener("mousedown", function() {
  // 鼠标按下时，给全局文档绑定事件
  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("mouseup", handleMouseUp);
});

关键改动说明 #

• 将mousemove事件绑定到document，确保鼠标在页面任意位置移动都能触发滑块更新
• 新增mouseup事件监听，在拖拽结束时解绑全局事件，防止滑块持续响应鼠标移动
• 增加边界值校验，保证滑块宽度不会超出容器范围，避免异常显示
• 通过getBoundingClientRect()获取容器位置，计算鼠标相对偏移量，确保拖拽逻辑的准确性

内容的提问来源于stack exchange，提问作者moekm