Почему событие 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 как второй раз, но, как у вас есть щелчок.