input [type = number] постоянно увеличивается при нажатии на стрелки в Chrome и Edge
У меня возникла следующая проблема: после загрузки определенной библиотеки jQuery, если вы щелкните стрелку ввода числа, значение ввода будет увеличиваться (или уменьшаться) до тех пор, пока фокус не смещается за пределы элемента ввода.
Привязка input
события к элементу показала, что он продолжает запускаться, что заставило меня поверить, что какой-то фрагмент кода продолжает работать element.value
в цикле. Но этого не произошло.
Я отслеживал выпуск вниз к вызову event.preventDefault()
на mouseup
событиях.
Видеть:
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
Почему так происходит?
Ответы
Следующая проблема не имеет ничего общего с jQuery . Проблема в том, что код делает именно то, что вы хотели. В коде <input type="number" />
есть 2 события. Один - «mousedown», второй - «mouseup».
Рассмотрим следующий пример: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2
То же самое представлено в примере выше.
Что вы делаете, cancelling the 2nd part, ie mouseup
так это то, что если вы сделаете mousedown
и cancel
наведете курсор мыши, то число будет:
- Продолжайте увеличивать, если вы нажимаете стрелку вверх
- Продолжайте уменьшаться, если вы нажимаете стрелку вниз
Единственный сюрприз заключается в том, что это имело бы смысл, если бы вы написали код, добавляющий событие, input
а не body
, но в любом случае кажется browser by default is increasing or decreasing number -- based on event-bubbling to body
.
Примечание: проблема воспроизводится ниже, но jQuery не был добавлен!
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
У меня были проблемы с поиском информации путем поиска того, что вызывает эти бесконечно увеличивающиеся входные данные.
Только после того, как я сам обнаружил причину, я узнал о похожей ошибке, которая произошла с предотвращением значения по умолчанию mousemove
(https://stackoverflow.com/a/37521764/6849064). Хотя, похоже, этого больше не происходит.
Похоже, это ошибка Chrome (и Edge). Ноhttps://stackoverflow.com/a/65253876/6849064сказал, на самом деле это поведение по умолчанию, которое имеет смысл в том, как он это сказал. Мне самому не удалось найти где-либо задокументированного этого стандартного поведения. Один из способов решить проблему - остановить всплытие события до документа,
document.querySelector('input').addEventListener('mouseup', (e) => {
e.stopPropagation();
});
А другой - ну, не предотвращает поведение по умолчанию.