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 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
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:
- 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 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">
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.