インライン onclick ハンドラーを使用して、ネストされた要素でのイベントの伝播を防ぐにはどうすればよいですか?

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

複数の要素が相互にネストされており、独自の onclick イベント ハンドラーがある場合、次のことが可能です。イベントを 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 イベント ハンドラーと div の onclick の両方がトリガーされますイベントハンドラ。 div へのイベントの伝播を防ぐには、次のいずれかの方法を使用できます。

1. event.stopPropagation()

このメソッドは、イベントが DOM ツリーの上に伝播するのを停止します。

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

2. window.event.cancelBubble (IE の場合)

Internet Explorer の場合、同等のメソッドは window.event.cancelBubble.

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

です。

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