インライン Onclick イベント リスナーによるイベント伝播の防止
HTML では、インライン イベント リスナーを使用して、要素のタグ内にイベント処理を直接追加できます。ただし、子要素のイベントが親要素のイベントをトリガーすべきでない状況に遭遇することがあります。
問題:
次のコードを考えてみましょう:
1 2 3 |
|
このスニペットでは、ユーザーがスパンをクリックすると、スパンのクリック イベントと div のクリック イベントの両方が発生します。
解決策:
スパンから div へのイベントの伝播を停止するには、event.stopPropagation() メソッドを使用できます。
1 |
|
event.stopPropagation() を呼び出すことで、イベントが親要素にバブルアップするのを防ぎ、効果的に要素を分離します。
IE の代替:
event.stopPropagation() をサポートしていない古いバージョンの Internet Explorer の場合は、ウィンドウを使用できます。 .event.cancelBubble = true:
1 |
|
このメソッドは、明示的にキャンセルすることで同じ結果を達成します。イベントの伝播。
以上がHTML で子要素から親要素へのイベントの伝播を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。