input [type = number] aumentando continuamente ao clicar nas setas no Chrome e no Edge

Dec 11 2020

Estou tendo o seguinte problema: depois que uma determinada biblioteca jQuery carrega, se você clicar em uma seta de entrada numérica, o valor de entrada continua aumentando (ou diminuindo) até que o foco seja deslocado para fora do elemento de entrada.

Vincular um inputevento ao elemento mostrou que ele continua disparando, o que me levou a acreditar que alguma parte do código ficava element.valueem loop. Mas isso não aconteceu.

Eu rastreei o problema até convocar event.preventDefault()um mouseupevento.

Vejo:

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

Por que isso acontece?

Respostas

1 Deadpool Dec 11 2020 at 22:12

O seguinte problema não tem nada a ver com jQuery . O problema é que o código está fazendo exatamente o que você queria. No código <input type="number" />tem 2 eventos. Um é 'mousedown' e o segundo é 'mouseup'.

Considere o seguinte exemplo: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2

O mesmo é representado no exemplo acima.

O que você está fazendo é cancelling the 2nd part, ie mouseup, se você fizer mousedowne cancelpassar o mouse, o número irá:

  1. Continue aumentando se você empurrar para cima
  2. Continue diminuindo se você empurrar a seta para baixo

A única, a surpresa é que isso teria sentido se você teria escrito o código adicionando evento para input, em vez de body, mas mesmo assim parece browser by default is increasing or decreasing number -- based on event-bubbling to body.

Nota: O problema é replicado abaixo, embora nenhum jQuery tenha sido adicionado!

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

1 AnteNovokmet Dec 11 2020 at 18:39

Tive dificuldade em encontrar informações pesquisando o que causa essas entradas infinitamente crescentes.

Só depois de descobrir a causa sozinho, descobri sobre um bug semelhante que aconteceu com a prevenção do padrão de mousemove(https://stackoverflow.com/a/37521764/6849064) Embora, este pareça não acontecer mais.

Parece que este é um bug do Chrome (e do Edge). Mas comohttps://stackoverflow.com/a/65253876/6849064disse, é na verdade um comportamento padrão que faz sentido na forma como ele disse. Eu mesmo não consegui encontrar esse comportamento padrão documentado em qualquer lugar. Uma maneira de resolver o problema é parar de borbulhar o evento no documento,

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

E a outra é, bem, não impedir o comportamento padrão.