input [type = number] augmentant continuellement lorsque vous cliquez sur les flèches dans Chrome et Edge
Je rencontre le problème suivant: après le chargement d'une bibliothèque jQuery particulière, si vous cliquez sur une flèche d'entrée numérique, la valeur d'entrée continue d'augmenter (ou de diminuer) jusqu'à ce que le focus soit déplacé en dehors de l'élément d'entrée.
La liaison d'un input
événement à l'élément montrait qu'il continuait element.value
à se déclencher, ce qui m'a amené à croire qu'un morceau de code continuait à se mettre en boucle. Mais cela ne s'est pas produit.
J'ai retracé le problème jusqu'à la convocation event.preventDefault()
d'un mouseup
événement.
Voir:
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
Pourquoi cela arrive-t-il?
Réponses
Le problème suivant n'a rien à voir avec jQuery . Le problème est que le code fait exactement ce que vous vouliez qu'il fasse. Dans le code <input type="number" />
a 2 événements. L'un est «mousedown» et le second est «mouseup».
Prenons l'exemple suivant: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2
La même chose est représentée dans l'exemple ci-dessus.
Ce que vous faites est le cancelling the 2nd part, ie mouseup
cas si vous faites mousedown
et cancel
mouseup, alors le nombre:
- Continuez à augmenter si vous poussez vers le haut
- Continuez à diminuer si vous appuyez sur la flèche vers le bas
La seule surprise est que cela aurait un sens parfait si vous aviez écrit le code en ajoutant l'événement à input
plutôt que body
, mais il semble de toute façon browser by default is increasing or decreasing number -- based on event-bubbling to body
.
Remarque: le problème est répliqué ci-dessous, alors qu'aucun jQuery n'a été ajouté!
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
J'ai eu du mal à trouver des informations en cherchant ce qui cause ces entrées infiniment croissantes.
Ce n'est qu'après avoir trouvé la cause moi-même que j'ai découvert un bug similaire qui s'est produit avec la prévention de la valeur par défaut de mousemove
(https://stackoverflow.com/a/37521764/6849064). Bien que celui-ci ne semble plus se produire.
On dirait qu'il s'agit d'un bogue Chrome (et Edge). Mais commehttps://stackoverflow.com/a/65253876/6849064dit, c'est en fait un comportement par défaut qui a du sens dans la façon dont il l'a dit. J'ai moi-même échoué à trouver ce comportement standard documenté nulle part. Une façon de résoudre le problème consiste à arrêter le bullage de l'événement jusqu'au document,
document.querySelector('input').addEventListener('mouseup', (e) => {
e.stopPropagation();
});
Et l'autre, eh bien, n'empêche pas le comportement par défaut.