Die Eingabe [Typ = Nummer] nimmt kontinuierlich zu, wenn Sie in Chrome und Edge auf die Pfeile klicken

Question

Beim folgenden Problem tritt Folgendes auf: Wenn Sie nach dem Laden einer bestimmten jQuery-Bibliothek auf einen Zahleneingabepfeil klicken, wird der Eingabewert so lange erhöht (oder verringert), bis der Fokus außerhalb des Eingabeelements verschoben wird.

Das Binden eines inputEreignisses an das Element zeigte, dass es immer wieder ausgelöst wird, was mich zu der Annahme führte, dass ein Teil des Codes immer wieder element.valuein einer Schleife gesetzt wurde. Das ist aber nicht passiert.

Ich habe das Problem aufgespürt, event.preventDefault()um ein mouseupEreignis aufzurufen .

Sehen:

document.body.addEventListener('mouseup', (e) => {
    e.preventDefault();
});

<input type="number">

Warum passiert das?

Answer 1

Das folgende Problem hat nichts mit jQuery zu tun . Das Problem ist, dass der Code genau das tut, was Sie wollten. Im Code <input type="number" />hat 2 Ereignisse. Eine ist "Mousedown" und die zweite ist "Mouseup".

Betrachten Sie folgendes Beispiel: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2

Das gleiche ist im obigen Beispiel dargestellt.

Was Sie tun, ist cancelling the 2nd part, ie mouseup, wenn Sie dies tun mousedownund die cancelMaus bewegen, dann wird die Nummer:

1. Steigern Sie weiter, wenn Sie nach oben drücken
2. Verringern Sie weiter, wenn Sie nach unten drücken

Die einzige Überraschung ist, dass dies durchaus Sinn hätte, wenn Sie den Code zum Hinzufügen eines Ereignisses geschrieben hätten inputund nicht body, aber es scheint trotzdem browser by default is increasing or decreasing number -- based on event-bubbling to body.

Hinweis: Das Problem wird unten repliziert, während keine jQuery hinzugefügt wurde!

document.body.addEventListener('mouseup', (e) => {
  e.preventDefault();
});

<input type="number">

Answer 2

Ich hatte Probleme, Informationen zu finden, indem ich nach den Ursachen dieser unendlich steigenden Eingaben suchte.

Erst nachdem ich die Ursache selbst gefunden habe, habe ich einen ähnlichen Fehler entdeckt, der beim Verhindern des Standardwerts von mousemove(https://stackoverflow.com/a/37521764/6849064). Obwohl dies nicht mehr zu passieren scheint.

Es sieht so aus, als wäre dies ein Chrome- (und Edge-) Fehler. Aberhttps://stackoverflow.com/a/65253876/6849064sagte, es ist tatsächlich Standardverhalten, das in der Art, wie er es sagte, Sinn macht. Ich selbst konnte dieses Standardverhalten nirgendwo dokumentieren. Eine Möglichkeit, das Problem zu beheben, besteht darin, das Sprudeln des Ereignisses bis zum Dokument zu stoppen.

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

Und das andere verhindert nicht das Standardverhalten.