Javascript垂直音量滑块无法工作，拖动异常不跟随鼠标如何解决

核心错误点 #

• 事件名拼写错误：代码中监听的事件名写为mousdown，正确拼写为mousedown，导致按下事件完全无法触发
• 拖动状态逻辑颠倒：按下鼠标（mousedown）时才需要开启拖动状态drag = true，松开鼠标（mouseup）时要关闭拖动状态drag = false，原代码把两个事件的赋值写反了
• 事件绑定范围错误：mouseup绑定在滑块元素上，当鼠标拖动到滑块外松开时无法触发监听事件，会一直保持拖动状态，应该绑定到全局document上
• 坐标计算逻辑错误：计算百分比时多了无意义的系数25，且没有适配旋转后元素的坐标映射关系
• 样式适配问题：旋转元素默认以中心为原点，导致点击区域和视觉区域不匹配，需要设置transform-origin修正坐标基准

修正后代码 #

HTML #

<audio src="你的音频文件地址" controls></audio>
<div class="volume-slider-con">
  <div class="volume-slider"></div>
</div>

CSS #

.volume-slider-con{
  height:15px;
  width:100px;
  margin-top: 255px;
  margin-left: 106px;
  position:relative;
  background-color: #000000;
  transform: rotate(270deg);
  transform-origin: left top; /* 修正旋转原点，匹配坐标计算基准 */
  border-radius: 2px;
  cursor: pointer;
}
.volume-slider{
  height:100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  background-color: #ffffff;
  border-radius: 2px;
}

JavaScript #

var e = document.querySelector('.volume-slider-con');
var eInner = document.querySelector('.volume-slider');
var audio = document.querySelector('audio');
var drag = false;
// 按下滑块开启拖动状态
e.addEventListener('mousedown',function(ev){
   drag = true;
   updateBar(ev.clientY);
});
// 鼠标移动时检测拖动状态更新滑块
document.addEventListener('mousemove',function(ev){
   if(drag){
      updateBar(ev.clientY); 
   }
});
// 全局监听鼠标松开，关闭拖动状态
document.addEventListener('mouseup',function(ev){
 drag = false; 
});
// 点击滑块直接跳转对应音量
e.addEventListener('click', function(ev) {
  updateBar(ev.clientY);
})

var updateBar = function (y, vol) {
  var percentage;
  if (vol) {
    percentage = vol * 100;
  } else {
    // 适配旋转后元素的坐标计算逻辑
    var sliderRect = e.getBoundingClientRect();
    var position = sliderRect.bottom - y;
    percentage = 100 * position / e.clientHeight;
  }
  // 音量边界限制
  percentage = Math.max(0, Math.min(100, percentage));
  eInner.style.width = percentage +'%';
  audio.volume = percentage / 100;
};

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