Question

感谢您抽出宝贵时间阅读我的问题。

HTML（Slider）中的“范围”input元素会触发onchange - 事件，其中span元素的内容会使用{{的当前值更新1}}元素。

不知何故，对input元素进行的第一次更改不会触发input事件。当使用'onclick'事件时，它会触发。

这是代码，首先是HTML：

onchange

现在JavaScript：

<div>

    <input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
    <span id="main_options_plug1_lengthPE_value"> … </span>

</div>

我创建了JSFiddle，因此您可以自己尝试。

到目前为止，我没有在stackoverflow上找到这个问题的答案，我发现的任何关于function setOpenEndPELength(plug) { if (plug == "plug1" || plug == "plug2") { var slider = document.getElementById("main_options_" + plug + "_lengthPE_input"); var span = document.getElementById("main_options_" + plug + "_lengthPE_value"); span.innerHTML = slider.value + " mm"; } }事件的问题根本没有触发。在这种情况下，它只是第一个不起作用的变化。

希望有人知道答案。非常感谢任何帮助，提前谢谢。

Answer 1

如果我正确理解了这个问题，问题是在Firefox上，当光标位于滑块按钮上并按下鼠标时按下鼠标按钮时，不会执行onchange处理程序。只有在这样移动后释放鼠标按钮才会执行。

这似乎是正确的行为（虽然其他一些浏览器不符合），因为HTML5 CR说明了change event：“如果元素没有定义激活行为但使用的用户界面涉及显式提交操作，然后每当用户提交对元素的值或所选文件列表的更改时，用户代理必须对任务进行排队，以触发一个简单的事件，该命令在命令输入元素处更改。“

这是一个有点复杂的表述，但接下来是一个澄清的例子：“具有提交操作的用户界面的第三个示例将是使用滑块的Range控件。当用户拖动控件旋钮时，只要位置发生变化，输入事件就会触发，而更改事件只会在用户松开旋钮时触发，并提交到特定值。“

结论是，在这种情况下，您应该使用oninput属性而不是onchange。在实践中，onmousemove也有效，但oninput更好，因为可以预期它可以使用不使用鼠标的输入法（无论它们是什么，例如通过语音控制）。

Answer 2

一个小技巧，如果onchange第一次没有触发，请添加：

onclick="console.log(1)"

点击还有其他动作，它仍然会第二次触发onchange，但首先您会获得点击。

Answer 3

在准备就绪的文档上，尝试手动触发未引起首次更改的事件。

所以只需添加如下代码：

shape: (1000, 120) range: 1000
results equal: True
bincount 461.14772390574217 ms
bc(F)    435.3669326752424 ms
bc->dict 932.1215840056539 ms
Counter  3473.3258984051645 ms
shape: (100000, 12) range: 100
results equal: True
bincount 89.80463854968548 ms
bc(F)    43.449611216783524 ms
bc->dict 46.470773220062256 ms
Counter  1987.6734036952257 ms

为什么onchange事件不会在第一次更改时触发？

3 个答案: