2012年07月26日に投稿

[Javascript] 内側の HTML 要素をクリックした時に、外側の HTML 要素もクリックされたことになる動作を防ぐ

Javascript では onclick プロパティに関数オブジェクトを代入することで、イベントを登録することができます。ある HTML 要素がクリックされたら指定の Javascript コードを実行するといった動作はもはや当たり前となりましたが、自然な動作を実現しようとすると考慮しなければならないことがあります。

例えば、下記のように div 要素が div 要素を内包しており、外側の div 要素にイベントを登録した場合です。下記ではわかりやすくするために click イベントを使っています。

上記のコードの状態では、「内側の要素」をクリックしたときに「外側の要素がクリックされました。」とアラートが表示されてしまいます。多くの場合、想定している挙動とは異なっていると思います。内側の要素がクリックされたときはアラートを表示したくないはずです。これは click イベントに限ったことではありませんが、Javascript には「イベントのバブリング」という挙動があります。

バブリングは単語から想像できるとおり、水中の泡が上へ向かうかのように、イベントが親要素へと伝わっていく挙動のことを指します。上記のコードの例では、id 「contents」がクリックされると、その親要素であるid 「wrapper」までクリックされたことが伝わります。そのため、id 「contents」をクリックしたはずなのに、id 「wrapper」に登録したイベントが動いてしまったということです。

そこで、親要素へイベントが伝わる「バブリング」を防ぐ方法が用意されています。バブリングを防ぐには stopPropagation メソッドを利用します。

バブリングを止めるコードは21行目~23行目に追加されています。id 「contents」のHTML要素がクリックされたら、イベントオブジェクト e の stopPropagation メソッドを実行して親要素へイベントが伝わらないようにしています。

バブリングについての詳細は下記が参考になります。

http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20addEventListener%28%29

関連記事

One Response to “[Javascript] 内側の HTML 要素をクリックした時に、外側の HTML 要素もクリックされたことになる動作を防ぐ”

Leave a Reply