input [type = number] stale rośnie po kliknięciu strzałek w Chrome i Edge
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 input
zdarzenia z elementem pokazało, że jest ono wyzwalane, co doprowadziło mnie do przekonania, że jakiś fragment kodu ustawiał się element.value
w pętli. Ale tak się nie stało.
Wyśledziłem problem do wezwania event.preventDefault()
na mouseup
wydarzenie.
Widzieć:
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
Dlaczego to się dzieje?
Odpowiedzi
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 mouseup
tak, że jeśli to zrobisz mousedown
i cancel
przesuniesz myszką, liczba będzie:
- Kontynuuj zwiększanie, jeśli naciskasz strzałkę w górę
- Zmniejszaj dalej, naciskając w dół
Jedyną niespodzianką jest to, że miałoby to sens, gdybyś napisał kod dodający zdarzenie input
zamiast 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">
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.