イベントがバブルアップしないのはなぜですか?

イベントが場合によってはバブルアップしないのはなぜですか?

イベント バブリングとは、要素上のイベントがトリガーされると、イベントが最も内側の要素から始まり、最も外側の要素に渡されるまで上向きに渡されることを意味します。ただし、場合によっては、イベントをバブルさせることができません。つまり、イベントはトリガーされた要素上でのみ処理され、他の要素には渡されません。この記事では、いくつかの一般的な状況を紹介し、イベントがバブルに失敗する理由について説明し、具体的なコード例を示します。

1. イベント キャプチャ モードを使用する:
   イベント キャプチャは、イベント バブリングとは対照的に、イベント配信のもう 1 つの方法です。キャプチャ モードでは、イベントは最も外側の要素から渡され、最も内側の要素に渡されるまで内側に向かって処理されます。イベントのキャプチャ中にイベントが処理されると、イベントはバブルされなくなります。 addEventListener メソッドの 3 番目のパラメータを使用して、イベントがキャプチャ フェーズで処理されるかバブリング フェーズで処理されるかを指定できます。デフォルトは false (バブリング フェーズ) です。以下は、イベント キャプチャ モードを使用するコード例です。

document.addEventListener('click', function(event) {
  console.log('捕获阶段');
}, true);

document.addEventListener('click', function(event) {
  console.log('冒泡阶段');
}, false);

上記のコードでは、ページ上の任意の場所をクリックすると、イベントはキャプチャ フェーズとバブリング フェーズの両方で処理されます。 。 3 番目のパラメーターが true に設定されている場合、イベントはキャプチャ フェーズでのみ処理され、バブルされないため、イベントのバブルが失敗します。

2. stopPropagation メソッドを使用します。
   stopPropagation メソッドは、イベントの伝播を停止し、イベントのさらなるバブリングや配信を防ぐために使用されます。イベント ハンドラーで stopPropagation メソッドが呼び出されると、イベントは他の要素に配信されなくなります。以下は、stopPropagation メソッドを使用したコード例です。

document.getElementById('inner').addEventListener('click', function(event) {
  console.log('内层元素点击事件');
  event.stopPropagation();
});

document.getElementById('outer').addEventListener('click', function(event) {
  console.log('外层元素点击事件');
});

上記のコードでは、内側の要素がクリックされると、イベントは要素上で処理されますが、外側の要素には渡されません。その結果、イベントがバブルアップすることはできません。

3. マウスの右ボタン クリック イベントを使用する:
   一部のブラウザでは、マウスの右ボタン クリック イベント (コンテキスト メニュー) がバブルしません。これは、開発者がカスタム機能を右クリック メニューに追加しやすくするように設計されています。以下は、マウスの右クリック イベントがバブルできないコード例です。

document.addEventListener('contextmenu', function(event) {
  console.log('右键点击事件');
});

document.addEventListener('click', function(event) {
  console.log('点击事件');
});

上記のコードでは、ページを右クリックすると、右クリック イベントのみがトリガーされます。クリック イベントはトリガーされません。

概要:
イベントがバブルできない状況には、イベント キャプチャ モードの使用、stopPropagation メソッドの呼び出し、およびマウスの右クリック イベントが含まれます。これらの状況を理解することは、開発中のイベント配信メカニズムをより深く理解し、予期しない問題を回避するのに役立ちます。上記の内容が読者の皆様にインスピレーションを与えることができれば幸いです。

以上がイベントがバブルアップしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。