input [type = number] aumentando continuamente al hacer clic en las flechas en Chrome y Edge
Estoy experimentando el siguiente problema: después de que se carga una biblioteca jQuery en particular, si hace clic en una flecha de entrada numérica, el valor de entrada sigue aumentando (o disminuyendo) hasta que el foco se desplaza fuera del elemento de entrada.
La vinculación de un input
evento al elemento mostró que se sigue disparando, lo que me llevó a creer que algún fragmento de código seguía configurándose element.value
en un bucle. Pero eso no sucedió.
He rastreado el problema hasta convocar event.preventDefault()
un mouseup
evento.
Ver:
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
¿Por qué pasó esto?
Respuestas
El siguiente problema no tiene nada que ver con jQuery . El problema es que el código está haciendo exactamente lo que usted quería que hiciera. En el código <input type="number" />
tiene 2 eventos. Uno es "mousedown" y el segundo es "mouseup".
Considere el siguiente ejemplo: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2
Lo mismo se representa en el ejemplo anterior.
Lo que está haciendo es cancelling the 2nd part, ie mouseup
que si lo hace mousedown
y el cancel
mouse hacia arriba, el número será:
- Sigue aumentando si empujas hacia arriba
- Sigue disminuyendo si empujas hacia abajo
La única sorpresa es que esto tendría perfecto sentido si hubiera escrito el código agregando el evento en input
lugar de body
, pero de todos modos parece browser by default is increasing or decreasing number -- based on event-bubbling to body
.
Nota: El problema se replica a continuación, ¡aunque no se ha agregado jQuery!
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
Tuve problemas para encontrar información buscando qué causa estas entradas infinitamente crecientes.
Solo después de encontrar la causa yo mismo, descubrí un error similar que sucedió al evitar el valor predeterminado de mousemove
(https://stackoverflow.com/a/37521764/6849064). Aunque, este parece que ya no sucederá.
Parece que esto es un error de Chrome (y Edge). Pero comohttps://stackoverflow.com/a/65253876/6849064dijo, en realidad es un comportamiento predeterminado que tiene sentido en la forma en que lo dijo. Yo mismo no pude encontrar este comportamiento estándar documentado en ninguna parte. Una forma de solucionar el problema es dejar de propagar el evento hasta el documento,
document.querySelector('input').addEventListener('mouseup', (e) => {
e.stopPropagation();
});
Y el otro es, bueno, no evitar el comportamiento predeterminado.