input [type = number] постоянно увеличивается при нажатии на стрелки в Chrome и Edge

Dec 11 2020

У меня возникла следующая проблема: после загрузки определенной библиотеки jQuery, если вы щелкните стрелку ввода числа, значение ввода будет увеличиваться (или уменьшаться) до тех пор, пока фокус не смещается за пределы элемента ввода.

Привязка inputсобытия к элементу показала, что он продолжает запускаться, что заставило меня поверить, что какой-то фрагмент кода продолжает работать element.valueв цикле. Но этого не произошло.

Я отслеживал выпуск вниз к вызову event.preventDefault()на mouseupсобытиях.

Видеть:

document.body.addEventListener('mouseup', (e) => {
    e.preventDefault();
});
<input type="number">

Почему так происходит?

Ответы

1 Deadpool Dec 11 2020 at 22:12

Следующая проблема не имеет ничего общего с 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наведете курсор мыши, то число будет:

  1. Продолжайте увеличивать, если вы нажимаете стрелку вверх
  2. Продолжайте уменьшаться, если вы нажимаете стрелку вниз

Единственный сюрприз заключается в том, что это имело бы смысл, если бы вы написали код, добавляющий событие, 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">

1 AnteNovokmet Dec 11 2020 at 18:39

У меня были проблемы с поиском информации путем поиска того, что вызывает эти бесконечно увеличивающиеся входные данные.

Только после того, как я сам обнаружил причину, я узнал о похожей ошибке, которая произошла с предотвращением значения по умолчанию mousemove(https://stackoverflow.com/a/37521764/6849064). Хотя, похоже, этого больше не происходит.

Похоже, это ошибка Chrome (и Edge). Ноhttps://stackoverflow.com/a/65253876/6849064сказал, на самом деле это поведение по умолчанию, которое имеет смысл в том, как он это сказал. Мне самому не удалось найти где-либо задокументированного этого стандартного поведения. Один из способов решить проблему - остановить всплытие события до документа,

document.querySelector('input').addEventListener('mouseup', (e) => {
    e.stopPropagation();
});

А другой - ну, не предотвращает поведение по умолчанию.