React入門 練習問題 63:イベント処理(伝播の制御)
📊 Qraftユーザーの成績
- 難易度 Bランク(レーティング1200)
- 難易度 766位/2795問中
- 正答率 —(0回)
Reactのイベント処理において、子要素で発生したクリックイベントが親要素に伝わる「イベントバブリング」を止めるためのメソッドとして正しいものはどれか。
- イベントオブジェクトの e.stopPropagation() を呼び出す。
- イベントオブジェクトの e.preventDefault() を呼び出す。
- イベントオブジェクトの e.haltPropagation() を呼び出す。
- イベントオブジェクトの e.stopBubbling() を呼び出す。
- イベントオブジェクトの e.cancelEvent() を呼び出す。
正解と解説を見る
正解:イベントオブジェクトの e.stopPropagation() を呼び出す。
Reactのイベント処理において、子要素から親要素へイベントが伝播する「イベントバブリング」を止めるには、イベントオブジェクトの `e.stopPropagation()` を呼び出すのが正解です。
【正解の理由】
`e.stopPropagation()` は、イベントがDOMツリーを上に向かって伝播(バブリング)するのを防ぐための標準的なメソッドです。これを呼び出すことで、親要素に設定されたイベントハンドラが意図せず実行されるのを防ぐことができます。
【不正解の理由】
• 「イベントオブジェクトの e.preventDefault() を呼び出す。」という説明は誤り(これはリンクの遷移など、ブラウザのデフォルト動作を防ぐためのメソッドであるため)
• 「イベントオブジェクトの e.haltPropagation() を呼び出す。」という説明は誤り(そのような名前のメソッドは存在しないため)
• 「イベントオブジェクトの e.stopBubbling() を呼び出す。」という説明は誤り(そのような名前のメソッドは存在しないため)
• 「イベントオブジェクトの e.cancelEvent() を呼び出す。」という説明は誤り(そのような名前のメソッドは存在しないため)