input [type = number] augmentant continuellement lorsque vous cliquez sur les flèches dans Chrome et Edge

Dec 11 2020

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

1 Deadpool Dec 11 2020 at 22:12

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 mouseupcas si vous faites mousedownet cancelmouseup, alors le nombre:

  1. Continuez à augmenter si vous poussez vers le haut
  2. 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 à inputplutô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">

1 AnteNovokmet Dec 11 2020 at 18:39

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.