インライン onclick を使用して JavaScript でイベントの伝播を防ぐ方法

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

イベント伝播とは、DOM ツリーを介したイベントのカスケード効果を指します。イベントが内部要素で発生すると、通常はその親要素にバブルアップします。特定のシナリオでは、意図しない動作を防ぐためにこの伝達を停止することが望ましい場合があります。

次の HTML コードを考えてみましょう。

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

ユーザーが 内の任意の場所をクリックしたとき。要素を使用すると、span と div の両方のクリック ハンドラーが起動されます。ただし、ユーザーが子要素を操作するときに div のクリック イベントがトリガーされないようにしたい場合があります。

これを実現するには、event.stopPropagation() メソッドを利用します。この関数は、イベントが親要素にバブルアップするのを効果的に停止します。変更されたコードは次のとおりです。

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

ユーザーが をクリックすると、要素では、それ自体のクリック イベントのみが発生します。 div のクリック イベントはトリガーされなくなります。

IE の互換性

古いバージョンの Internet Explorer (IE) は、event.stopPropagation() をネイティブにサポートしていないことに注意してください。代わりに、 window.event.cancelBubble = true:

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

を使用する必要があります。

以上がインライン onclick を使用して JavaScript でイベントの伝播を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。