input [type = number] aumentando continuamente al hacer clic en las flechas en Chrome y Edge

Dec 11 2020

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 inputevento 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.valueen un bucle. Pero eso no sucedió.

He rastreado el problema hasta convocar event.preventDefault()un mouseupevento.

Ver:

document.body.addEventListener('mouseup', (e) => {
    e.preventDefault();
});
<input type="number">

¿Por qué pasó esto?

Respuestas

1 Deadpool Dec 11 2020 at 22:12

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 mouseupque si lo hace mousedowny el cancelmouse hacia arriba, el número será:

  1. Sigue aumentando si empujas hacia arriba
  2. 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 inputlugar 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">

1 AnteNovokmet Dec 11 2020 at 18:39

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.