ホームページ > ウェブフロントエンド > jsチュートリアル > インライン onclick 属性を使用して HTML でのイベント伝播を防ぐにはどうすればよいですか?

インライン onclick 属性を使用して HTML でのイベント伝播を防ぐにはどうすればよいですか?

DDD
リリース: 2024-12-08 22:13:17
オリジナル
346 人が閲覧しました

How Can I Prevent Event Propagation in HTML Using Inline onclick Attributes?

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

HTML でイベントを処理する場合、多くの場合、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 属性があります。デフォルトでは、をクリックすると、要素は両方の をトリガーします。

イベントの伝播を防ぎ、 のみをトリガーするため。イベントが発生した場合、イベントが親要素にバブルアップするのを停止する必要があります。これは、次の手法を使用して実現できます。

event.stopPropagation() を使用する

(最新のブラウザー)
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
ログイン後にコピー

window.event.cancelBubble を使用する

(Internet Explorer)
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
ログイン後にコピー

これらを追加することで の onclick 属性に行を追加します。要素を使用すると、イベントが親
に伝播されないようにします。要素を使用すると、要素ごとにクリック イベントを個別に処理できるようになります。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート