input [type = number] aumentando continuamente ao clicar nas setas no Chrome e no Edge
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 input
evento ao elemento mostrou que ele continua disparando, o que me levou a acreditar que alguma parte do código ficava element.value
em loop. Mas isso não aconteceu.
Eu rastreei o problema até convocar event.preventDefault()
um mouseup
evento.
Vejo:
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
Por que isso acontece?
Respostas
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 mousedown
e cancel
passar o mouse, o número irá:
- Continue aumentando se você empurrar para cima
- 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">
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.