masukan [type = number] terus meningkat saat mengklik panah di Chrome dan Edge

Question

Saya mengalami masalah berikut: Setelah library jQuery tertentu dimuat, jika Anda mengklik panah input angka, nilai input terus meningkat (atau menurun) hingga fokus bergeser ke luar elemen input.

Mengikat suatu inputperistiwa ke elemen menunjukkan itu terus memicu, yang membuat saya percaya beberapa bagian kode terus disetel element.valuedalam satu lingkaran. Tetapi hal tersebut tidak terjadi.

Saya telah melacak masalah tersebut hingga menghubungi event.preventDefault()sebuah mouseupacara.

Lihat:

document.body.addEventListener('mouseup', (e) => {
    e.preventDefault();
});

<input type="number">

Mengapa ini terjadi?

Answer 1

Masalah berikut tidak ada hubungannya dengan jQuery . Masalahnya adalah kode melakukan apa yang Anda inginkan. Dalam kodenya <input type="number" />sudah ada 2 event. Salah satunya adalah 'mousedown' dan yang kedua adalah 'mouseup'.

Pertimbangkan contoh berikut: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2

Hal yang sama ditunjukkan pada contoh di atas.

Apa yang Anda lakukan adalah cancelling the 2nd part, ie mouseupjika Anda melakukannya mousedowndan cancelmouseup, maka nomor tersebut akan:

1. Terus meningkat jika Anda mendorong ke atas
2. Lanjutkan mengurangi jika Anda menekan ke bawah

Satu-satunya, kejutan adalah ini akan memiliki perasaan yang sempurna jika Anda akan menulis kode menambahkan acara inputdaripada body, tetapi tampaknya browser by default is increasing or decreasing number -- based on event-bubbling to body.

Catatan: Masalah ini direplikasi di bawah, sementara tidak ada jQuery yang ditambahkan!

document.body.addEventListener('mouseup', (e) => {
  e.preventDefault();
});

<input type="number">

Answer 2

Saya kesulitan menemukan informasi dengan mencari apa yang menyebabkan input yang terus meningkat ini.

Hanya setelah menemukan penyebabnya sendiri, saya menemukan tentang bug serupa yang terjadi dengan mencegah default mousemove(https://stackoverflow.com/a/37521764/6849064). Meski, yang satu ini sepertinya tidak terjadi lagi.

Sepertinya ini adalah bug Chrome (dan Edge). Tetapi sebagaihttps://stackoverflow.com/a/65253876/6849064mengatakan, sebenarnya perilaku defaultlah yang masuk akal dalam cara dia mengatakannya. Saya sendiri gagal menemukan perilaku standar ini didokumentasikan di mana pun. Salah satu cara untuk memperbaiki masalah ini adalah dengan menghentikan acara menggelegak ke dokumen,

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

Dan yang lainnya adalah, bukan mencegah perilaku default.