onmousedown 和 onmousemove 之间的 JavaScript 冲突

Question

我用纯 JavaScript 开发了一个音量 Controller 。鼠标移动效果很好，但不幸的是我无法使其成为完美的音量 Controller 。 该功能面临两个问题:

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

Answer 1

1. 鼠标单击时音量不会改变，因为要执行的函数 onmousemove 只会在单击后移动鼠标时执行。

2. 您应该在 onmouseup 内将 onmousemove 设置为 null

这是修复后的版本:

var vControl = document.getElementById("voumecontrol");
var vNow = document.getElementById("volumenow");
var resultDiv = document.getElementById("result");
var mousemovemethod = 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.onmousedown = function (e) {
    mousemovemethod(e);
    vControl.onmousemove = mousemovemethod;
    vControl.onmouseup = function (e) {
        vControl.onmousemove = null;
    }
}

更新的演示: http://codepen.io/anon/pen/iHaBe