シンプルな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>