Question

我在HTML页面中有一个范围输入，实际上代表音乐时间轴。我得到了一个脚本，随着音乐的进行，手柄沿着滑块移动现在，我希望能够移动手柄，以便在我用鼠标设置手柄的地方播放音乐问题是当我开始沿着滑块拖动手柄时，一旦脚本更新了它的位置，它就会被设置到它的实际位置而我无法控制它。
我该如何解决这个问题，以便我可以随意移动手柄？要播放音乐我正在使用插件，soundmanager2，我正在使用提供的whileplaying回调函数来设置音乐进展时滑块的位置。

这是HTML位：

<div id="timeCtl">
    <span id="timeRange">
        <input id="time" type="range" value="0" min="0" max="1000"/>
    </span>
    <p id="timeCpt">00:00 / 00:00</p>
</div>

与之相关的JS：

//This is the callback function contained within an object being created
whileplaying : function() {

    //This whole block processes the "position / duration" display
        var dur = parseInt(this.duration/1000, 10);
        var durMin = parseInt(dur/60, 10);
        var durSec = dur%60;

        var pos = parseInt(this.position/1000, 10);
        var posMin = parseInt(pos/60, 10);
        var posSec = pos%60;

        if (posMin < 10)
        {
            posMin = "" + "0" + posMin.toString();
        }
        if (posSec < 10)
        {
            posSec = "" + "0" + posSec.toString();
        }
        if (durMin < 10)
        {
            durMin = "" + "0" + durMin.toString();
        }
        if (durSec < 10)
        {
            durSec = "" + "0" + durSec.toString();
        }

        var displayDur = durMin.toString() + ":" + durSec.toString();
        var displayPos = posMin.toString() + ":" + posSec.toString();

        g("timeCpt").innerHTML = displayPos + " / " + displayDur;

    //And here is the part that take care of moving the handle
        var curPos = parseInt(pos / dur * 1000, 10);
        g("timeRange").innerHTML = "<input id=\"time\" type=\"range\" value=\"" + curPos.toString() + "\" min=\"0\" max=\"1000\">";
        //The problem is that it moves the handle while I'm dragging it and then I lose control and have to grab it again
        //How to avoid that ?
}

感谢您抽出时间阅读本文，并提前感谢您的回答。

Answer 1

实际上我可能找到了解决问题的方法我可以制作这样的东西，以便当onclick事件被触发时，移动范围的脚本被禁用，直到onrelease事件被触发（完全不确定事件名称，但我想知道它们到底是什么）。
我会试试这个并保持线程更新。

编辑：这有效。

创建一个布尔变量。
使用布尔变量控制的条件包围脚本的更新部分。
当触发滑块的 onmousedown 事件时，将布尔变量设置为false，这将阻止脚本更新它。
在 onmouseup 被触发时将其设置为true，如果需要，可以进行一些额外的处理。

用鼠标移动一个范围没有被脚本引起的移动扰乱

1 个答案: