非常に短いバージョン:

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

HTMLコード:

JavaScript コード:

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

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

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

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

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

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

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

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

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

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

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