簡單的js滑塊，閱讀ofssetX使處理器跳躍

Question

我想建立非常簡單的水平滑塊使用純JavaScript，我不想任何庫像jquery。一開始任務似乎很簡單，但我遇到了一個問題。我正在嘗試從offsetX屬性中讀取設置，以在正確的位置設置處理程序。問題是，當我在軌道上滑動處理程序時，它有時會切換事件目標，並將處理程序的讀數更改爲跟蹤滑塊容器。整個過程的視覺效果並不是最好的。

這是我如何構建這樣的：

<div class="slider"> 
    <div class="track"> 
     <div class="handler"></div> 
    </div> 
</div> 

和後面的代碼：

var dragging = false; 

document.querySelector('.slider').onmousemove = function(event) { 
    if(dragging) { 
     document.querySelector('.handler').style.left = (event.offsetX - 15) + 'px'; 
    } 
}; 

document.querySelector('.handler').onmousedown = function(event) { 
    dragging = true; 
}; 

window.onmouseup = function(event) { 
    dragging = false; 
} 

fiddle demo

我認爲，解決辦法是防止事件從錯誤的讀數（從處理程序或跟蹤），並且始終只使用相對於滑塊div的鼠標位置。但如何做到這一點，我還不知道。有沒有人？ ;）

Answer 1

你的假設是正確的，因爲event.offsetX是相對於原始事件目標，你從處理程序，軌道和滑塊獲得不同的值。您可以改爲基於相對於客戶端窗口的滑塊和鼠標位置計算偏移量。看看附加的代碼片段。

var dragging = false; 
 
var sliderEl = document.querySelector('.slider'); 
 
var handlerEl = document.querySelector('.handler'); 
 

 
sliderEl.onmousemove = function(event) { 
 
    if (dragging) { 
 
    var sliderRect = sliderEl.getBoundingClientRect(); 
 
    var offset = Math.max(event.clientX - sliderRect.left, 0); 
 
    offset = Math.min(offset, sliderRect.width); 
 
    handlerEl.style.left = (offset - 15) + 'px'; 
 
    } 
 
    return false; 
 
}; 
 

 
handlerEl.onmousedown = function(event) { 
 
    dragging = true; 
 
}; 
 

 
window.onmouseup = function(event) { 
 
    dragging = false; 
 
}

#container { 
 
    width: 500px; 
 
    height: 40px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.slider, 
 
.slider * { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.slider { 
 
    background: #ccc; 
 
    border: solid 1px #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.slider .track { 
 
    width: 100%; 
 
    background: #000; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: calc(50% - 10px); 
 
} 
 
.slider .track .handler { 
 
    border: solid 1px #fff; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: lime; 
 
    position: absolute; 
 
    top: calc(50% - 15px); 
 
    left: 0px; 
 
    cursor: pointer; 
 
}

<div id="container"> 
 

 
    <div class="slider"> 
 
    <div class="track"> 
 
     <div class="handler"></div> 
 
    </div> 
 
    </div> 
 

 
</div>