javascript - onmousedown と onmousemove の間の Javascript の競合

Question

純粋な JavaScript でボリューム コントローラーを開発しました。マウスの動きは正常に機能しますが、残念ながら完全なボリューム コントローラーにすることはできません。関数には次の 2 つの問題があります。

1. マウスクリックで音量が変わらない

2. onmousemove機能はその後も働き続けますonmouseup

    var vControl = document.getElementById("voumecontrol");
    var vNow = document.getElementById("volumenow");
    var resultDiv = document.getElementById("result");
    vControl.onmousedown = function (e) {
        vControl.onmousemove = function (e) {
            var varPosition = e.pageY - vControl.offsetTop;
            var volPercentage = varPosition / vControl.offsetHeight;
            kili = Math.abs((e.pageY - (vControl.offsetTop + vControl.offsetHeight)) / vControl.offsetHeight);
            var volumePer = kili * 100;
            vNow.style.height = volumePer + "%";
            resultDiv.innerHTML = "volume position " + volumePer + "%";
        }
        vControl.onmouseup = function (e) {
            vControl.onmousemove = function (e) {
                e.preventDefault();
            }
        }
    }
   

デモhttp://codepen.io/anon/pen/kpcvJ