HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

JavaScriptやjQueryでクリックイベントを設置した際に、そのイベントを子要素、孫要素へ伝播させないための処理を紹介します。

よくあるケースとして、ライトボックスのようなしくみを構築したときを考えます。
ブラウザの画面全体をグレーアウトして、その上のレイヤに画像、動画やフォームなどのコンテンツを配置します。

<div class="lightbox">
	<div class="grayout">
		<div class="contents">
画像、動画やフォームなどのコンテンツ
		</div>
	</div>
</div>

今回はjQueryで、グレーアウトしたエリアをクリックすると、ライトボックスをクローズするような処理を追加します。

$('.grayout').click(function(){
	$('.lightbox').fadeOut();
});

しかし、そのままではコンテンツエリア「class=”contents”」までイベントが伝播してしまい、コンテンツエリアをクリックしてもクローズしてしまいます。
そこで、コンテンツエリアをクリックしてもイベントが発生しないように以下の処理を追加します。

$('.contents').click(function(event){
	event.stopPropagation();
});

これで大丈夫です。
忘れてしまいがちなので、メモまで。

このエントリーをはてなブックマークに追加

Monthly Archives

Search