ChromeとEdgeの矢印をクリックすると、input [type = number]が継続的に増加します

Dec 11 2020

次の問題が発生しています。特定のjQueryライブラリが読み込まれた後、数値の入力矢印をクリックすると、フォーカスが入力要素の外側に移動するまで、入力値が増加(または減少)し続けます。

inputイベントを要素にバインドすると、イベントがトリガーされ続けることが示され、コードの一部element.valueがループに設定され続けていると私は信じました。しかし、それは起こりませんでした。

イベントの呼び出しまで問題を追跡しevent.preventDefault()ましたmouseup

見る:

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

なぜこれが起こるのですか?

回答

1 Deadpool Dec 11 2020 at 22:12

次の問題はjQueryとは何の関係もありません。問題は、コードがあなたが望んでいたことを正確に実行していることです。コード<input type="number" />には2つのイベントがあります。1つは「mousedown」で、もう1つは「mouseup」です。

次の例を検討してください。 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2

上記の例でも同じことが示されています。

あなたがしていることはcancelling the 2nd part, ie mouseupそうです、そしてあなたがそうmousedownしてcancelマウスアップすると、数は次のようになります:

  1. 上矢印を押すと増加し続けます
  2. 下矢印を押すと減少し続けます

唯一の驚きは、inputではなくにイベントを追加するコードを記述した場合、これは完全な意味を持つことですbodyが、とにかくそうbrowser by default is increasing or decreasing number -- based on event-bubbling to bodyです。

注: jQueryは追加されていませんが、この問題は以下に再現されています。

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

1 AnteNovokmet Dec 11 2020 at 18:39

これらの無限に増加する入力の原因を検索して情報を見つけるのに苦労しました。

自分で原因を見つけて初めて、mousemove(のデフォルトを防ぐことで起こった同様のバグを見つけましたhttps://stackoverflow.com/a/37521764/6849064)。しかし、これはもう起こらないようです。

これはChrome(およびEdge)のバグのようです。しかし、https://stackoverflow.com/a/65253876/6849064とは言っても、それは実際には彼が言った方法で意味のあるデフォルトの動作です。私自身、この標準的な動作がどこにも文書化されているのを見つけることができませんでした。この問題を解決する1つの方法は、ドキュメントまでのイベントのバブリングを停止することです。

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

そしてもう1つは、デフォルトの動作を妨げないことです。