输入类型的Onchange事件=具有此输入的外部更改的范围

Question

专业人员！

我正在尝试构建html5音频播放器。我甚至可以用这个播放器来解释发生了什么。我有进度条（最大属性是通过JavaScript设置的）：

<input type="range" min="0" max="" step="1" value="0" class="progbar_input" onclick="SetProgress(this.value)">

我有JavaScript功能：

function SetProgress(val) {
    $("#player").prop("currentTime", val);
}

好像一切都好。此外，在播放音乐时，进度条应自行更改：

$("#player").bind('timeupdate', function () {
    var currentTime = $("#player").prop('currentTime');
    $(".progbar_input").val(currentTime);
});

但是当我们将自动更改和手动更改结合起来时，我们会得到一种非常奇怪的行为。如果JavaScript可以及时更改值，只需单击 - 一切正常，但如果不能 - 自动更改发生。例如，在某个时刻我们有

<input type="range" value="10">

并且在第二次之后它会自动更改为11.我们点击40但是JavaScript更改为11.有时手动更改有效，有时没有，我甚至无法向Google发送搜索短语，所以请求您的帮助现在

JsFiddle：http://jsfiddle.net/UnR9L/1/

点击可能一切正常，但在不同位置点击10次后，您会发现错误。

Answer 1

我进行隐藏输入并在进度条上发生MouseDown事件时将其设置为1，并在MouseUp事件发生时将其设置为0。并且TimeUpdate事件检查此隐藏输入是否为0.如果为0 - 我修改进度条。