input [type = number] stale rośnie po kliknięciu strzałek w Chrome i Edge

Dec 11 2020

Występuje następujący problem: po załadowaniu określonej biblioteki jQuery, jeśli klikniesz strzałkę wprowadzania liczb, wartość wejściowa będzie wzrastać (lub maleć), aż fokus zostanie przesunięty poza element wejściowy.

Powiązanie inputzdarzenia z elementem pokazało, że jest ono wyzwalane, co doprowadziło mnie do przekonania, że ​​jakiś fragment kodu ustawiał się element.valuew pętli. Ale tak się nie stało.

Wyśledziłem problem do wezwania event.preventDefault()na mouseupwydarzenie.

Widzieć:

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

Dlaczego to się dzieje?

Odpowiedzi

1 Deadpool Dec 11 2020 at 22:12

Poniższy problem nie ma nic wspólnego z jQuery . Problem polega na tym, że kod robi dokładnie to, co chciałeś. W kodzie <input type="number" />znajdują się 2 zdarzenia. Jeden to „mousedown”, a drugi to „mouseup”.

Rozważ następujący przykład: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2

To samo przedstawiono w powyższym przykładzie.

To, co robisz, jest cancelling the 2nd part, ie mouseuptak, że jeśli to zrobisz mousedowni cancelprzesuniesz myszką, liczba będzie:

  1. Kontynuuj zwiększanie, jeśli naciskasz strzałkę w górę
  2. Zmniejszaj dalej, naciskając w dół

Jedyną niespodzianką jest to, że miałoby to sens, gdybyś napisał kod dodający zdarzenie inputzamiast body, ale i tak się wydaje browser by default is increasing or decreasing number -- based on event-bubbling to body.

Uwaga: problem jest replikowany poniżej, ale nie dodano żadnego jQuery!

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

1 AnteNovokmet Dec 11 2020 at 18:39

Miałem problem ze znalezieniem informacji, wyszukując przyczyny tych nieskończenie rosnących danych wejściowych.

Dopiero po samodzielnym znalezieniu przyczyny dowiedziałem się o podobnym błędzie, który miał miejsce z zapobieganiem domyślnemu ustawieniu mousemove(https://stackoverflow.com/a/37521764/6849064). Chociaż ten wydaje się już nie zdarzać.

Wygląda na to, że jest to błąd przeglądarki Chrome (i Edge). Ale jakohttps://stackoverflow.com/a/65253876/6849064powiedział, w rzeczywistości jest to zachowanie domyślne, które ma sens w sposobie, w jaki to powiedział. Sam nie udało mi się nigdzie udokumentować tego standardowego zachowania. Jednym ze sposobów rozwiązania tego problemu jest zatrzymanie propagowania zdarzenia aż do dokumentu,

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

A druga to, cóż, nie zapobieganie domyślnemu zachowaniu.