为什么Onchange事件不进行首次更改？

Question

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

一个“范围” input HTML（滑块）中的元素发射 onchange - 事件，其中的内容 span 元素随当前值而更新 input 元素。

不知何故，对 input 元素不发射 onchange 事件。当使用“ onclick”事件时，它会发射。

这是代码，首先是HTML：

<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>

现在JavaScript：

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";
    }
}

我创建了一个 JSFIDDLE, ，因此您可以自己尝试。

到目前为止，我还没有在Stackoverflow上找到这个问题的答案，我发现的任何问题 onchange 事件根本不要开火。在这种情况下，这只是不起作用的第一个更改。

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

Answer 1

如果我正确理解这个问题，问题是在Firefox上 onchange 当您按下光标在滑块的按钮上并移动鼠标时，请按下鼠标按钮时执行处理程序。仅在此移动后释放鼠标按钮后才执行。

这似乎是正确的行为（尽管其他一些浏览器不遵守），因为HTML5 CR说了 change 事件: ：“如果该元素没有定义激活行为，而是使用涉及显式提交操作的用户界面，那么任何时候用户对元素的值进行更改或所选文件的列表进行更改，则用户代理必须将任务排队点燃一个简单的事件，该事件在输入元素处燃烧起来更改。”

这有点复杂，但随后是一个澄清的示例：“使用提交操作的用户界面的第三个示例将是使用滑块的范围控件。当用户拖动控件的旋钮时，只要位置更改，输入事件就会发射，而更改事件只有在用户放开旋钮并承诺特定值时会发射。”

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

Answer 2

在文档中，尝试尝试手动引起的第一次更改尝试触发事件。

因此，只需添加以下代码：

$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)

Answer 3

一个小技巧，如果Onchange首次没有开火，请补充：

onclick="console.log(1)"

单击时，其他一些动作仍然是第二次点击Onchange，但首先是单击。