NumberInput マウス ホイール処理はキャプチャ フェーズ イベント フィルタリングを無視します

Question

非常に短いバージョン:

少し行き詰まっていて、なぜこのコードが実際にマウスホイールイベントをインターセプトして、数値エディターが数値を変更するために解釈するのを防ぐのかよくわかりません。 なぜイベントのキャプチャとフィルタリングのインターセプトが機能しないのかを理解したいのですが:

HTMLコード:

リーリー

JavaScript コード:

リーリー

手順: 入力した番号をクリックしてフォーカスし、マウス ホイールを使用します。マウス ホイールは JavaScript コードによってインターセプトされますが、キャプチャ フェーズ中に周囲の

への伝播を停止しても、数値は依然として変化します。

参考までに: https://jsfiddle.net/Ljku4gha/6/

私が達成したいことは何ですか?

デフォルトの数値入力フィールド (実際にはスライダー) を使用して再利用可能なコンポーネントを作成したいと考えています。ユーザーがこれらの入力でスクロール ホイールを使用して数値を変更できるようにしたくありません。代わりに、マウスホイールは、スクロール目的でその周囲の (未知の!) div (おそらく) でイベントをトリガーする必要があります。したがって、数値エディター (およびスライダー) が何らかの方法でマウス ホイール イベントを処理しないようにしたいと考えています。

長いバージョン: 私の分析/仮説

完全に説明することはできませんが、何が起こっているのかについては 2 つの仮説があります。 私の最初の考え、そして最も可能性が高いと思うのは、これはブラウザーがユーザー イベント (キーワード「ユーザー エージェント」だと思います) を処理する方法の成果物であるということです。ただし、ブラウザがユーザー イベントをどのように処理するかについてどこで読めるかを誰かが指摘してくれれば、それは大歓迎です。それまで、ブラウザでのイベント処理についての私の理解は次のとおりです。

ユーザーがマウスホイールをスクロールする

• JavaScript がイベントを処理する番です
• JavaScript はキャプチャ/バブル操作を実行します
  • イベント ハンドラーはイベントを処理済みとしてマークできます (preventDefault())
  JavaScript の外部: JavaScript のイベント ハンドラーが PreventDefault() を呼び出さない場合、「ユーザー エージェント」が順番にイベントを処理します。これについてはきめ細かい制御ができないため、このステップは完全に停止するか続行することしかできません。数値編集の「デフォルトの処理」は数値の変更であるため、数値は変更され、スクロール イベントは発行されません。
結果:

*残念でした*

しかし、私はこの理論が最も理にかなっていると思いますが、もしかしたら完全に間違っているのではないでしょうか？ ！

別の退屈な説明: 私は間違ったイベントを聞いているのでしょうか?

もしかしたら、何かが足りず、ホイール イベントが Default() をブロックできる他のイベントに変換されてしまうのではないでしょうか?それについての情報は見つかりませんでしたが、私にとっては完全に理にかなっています...おそらく？ 「リール」ですらない、それしか言えません。

私は主に、自分がやっていることがうまくいかない理由を理解するのに役立つガイダンスを得たいと思っています...そして、解決策も歓迎します。

---

Answer 1

数値入力のデフォルト動作を防止するには、event.preventDefault() を使用します。

改善点が 2 つあります:

• 入力がフォーカスされているとき (ホイールが値を変更するとき) にのみ、スクロール ホイールを無効にします。こうすることで、入力がフォーカスされていないときでも、スクロール ホイールは通常どおり動作します
• 入力がフォーカスされている場合、デフォルトを防止して入力をぼかし、次のホイール イベントでスクロールが再び機能するようにします (この調整が必要かどうかを決定する必要があります)。

キャプチャではこの問題を解決できません。理由は

残念ながら、デフォルトの動作をキャプチャすると、イベントが入力にバブルアップする前に発生します。

したがって、stopPropagation() はキャプチャフェーズでは役に立ちません。

リーリー リーリー リーリー