インライン onclick 属性を使用して HTML でのイベント伝播を防ぐにはどうすればよいですか?

インライン Onclick 属性によるイベント伝播の防止

HTML でイベントを処理する場合、多くの場合、DOM を介してイベントが伝播する方法を制御する必要があります。これは、イベント リスナーを共有する可能性のあるネストされた要素を管理する場合に特に当てはまります。

次の例を考えてみましょう。

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

この場合、

と の両方が(ヘッダー) と 要素には、クリックされたときにアラートを表示するインライン onclick 属性があります。デフォルトでは、をクリックすると、要素は両方の をトリガーします。

イベントの伝播を防ぎ、 のみをトリガーするため。イベントが発生した場合、イベントが親要素にバブルアップするのを停止する必要があります。これは、次の手法を使用して実現できます。

event.stopPropagation() を使用する

(最新のブラウザー)

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

window.event.cancelBubble を使用する

(Internet Explorer)

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

これらを追加することで の onclick 属性に行を追加します。要素を使用すると、イベントが親

に伝播されないようにします。要素を使用すると、要素ごとにクリック イベントを個別に処理できるようになります。

以上がインライン onclick 属性を使用して HTML でのイベント伝播を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。