JavaScript でイベントの伝播を防ぐにはどうすればよいですか?

インライン Onclick 属性を使用したイベント伝播の防止

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

<div onclick="alert('you clicked the header')">

このシナリオでは、ユーザーがspan要素をクリックすると、spanのクリックイベントとdivのクリックの両方が発生します。イベントがトリガーされます。これはイベント伝播として知られています。

ユーザーがスパンをクリックしたときに div のクリック イベントが発生しないようにするには、インライン イベント伝播テクニックを使用できます。

stopPropagation Method:

最も広くサポートされている方法は、スパンの onclick 属性。これを実装する方法は次のとおりです。

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

stopPropagation() を呼び出すと、クリック イベントの伝播が spam 要素で停止され、親 div に到達することが防止されます。

IE 互換性:

Internet Explorer の場合、次の代替手段が可能です。使用:

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

このコードは stopPropagation() と同じ結果を達成しますが、特に IE ブラウザ向けに調整されています。

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