移动范围，鼠标不受脚本引起的移动的干扰

Moving a range with mouse w/o being perturbed by script induced movements

本文关键字：移动 干扰 脚本 范围 鼠标      更新时间：2023-09-26

>我在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 ?
}

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

实际上，我可能已经找到了解决问题的方法。
我可以做一些事情，以便在触发 onclick 事件时，移动范围的脚本被禁用，直到触发 onrelease 事件（完全不确定事件名称，但我想找出它们到底是什么）。
我将尝试一下并使线程保持最新状态。

编辑：这有效。

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