2012年4月30日月曜日

JavaScriptのイベントバブリング抑制

HTML+JavaScriptでアプリケーションを作成した時、HTML要素をGUI部品のように重ねたのですが、意図したどおりに動作しませんでした。

<div class="親要素">
<button>ボタン</button>
</div>
親要素、ボタンともにJavaScriptでイベント処理を実装していたのですが、ボタンを押下すると両方のイベント処理がコールされました。

よくあるGUIツールキットのように、イベントは実行された時点で止まりません。

調べてみると、JavaScriptにはイベントバブリングというものがあるようです。

イベントバブリング
下位要素で発生したイベントが、階層構造の上位要素へと順に伝播すること。(泡が浮き上がっていくようなイメージ)
デフォルト動作であり、単一イベントで複数要素のイベントハンドラがキックされる。

イベント処理を意図した要素で止める場合、2つの方法があります。
  • HMTLの構造を入れ子にしない。
  • イベントハンドラ中で、明示的にバブリングを抑制する。


下記のコードで、イベントバブリングを抑制できます。

function onevent(e) {
  if (e.stopPropagation) {
    e.stopPropagation();  // Internet Explorer
  } else if (window.event) {
    window.event.cancelBubble = true;  // Internet Explorer以外,jQuery
  }
}

0 件のコメント:

コメントを投稿