HTML で子要素から親要素へのイベントの伝播を防ぐ方法

インライン Onclick イベント リスナーによるイベント伝播の防止

HTML では、インライン イベント リスナーを使用して、要素のタグ内にイベント処理を直接追加できます。ただし、子要素のイベントが親要素のイベントをトリガーすべきでない状況に遭遇することがあります。

問題:

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

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

このスニペットでは、ユーザーがスパンをクリックすると、スパンのクリック イベントと div のクリック イベントの両方が発生します。

解決策:

スパンから div へのイベントの伝播を停止するには、event.stopPropagation() メソッドを使用できます。

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

event.stopPropagation() を呼び出すことで、イベントが親要素にバブルアップするのを防ぎ、効果的に要素を分離します。

IE の代替:

event.stopPropagation() をサポートしていない古いバージョンの Internet Explorer の場合は、ウィンドウを使用できます。 .event.cancelBubble = true:

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

このメソッドは、明示的にキャンセルすることで同じ結果を達成します。イベントの伝播。

以上がHTML で子要素から親要素へのイベントの伝播を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。