Богатый внутренний мир календаря или обрезка click на внутренние теги
 

Здравствуйте.
Есть страничка – большой красивый фон, а в нём календарь. Это реализовано в div со следующей структурой.

<div class="widget-container widget_calendar" id="calendar-3">
<div id="calendar_wrap">
    		<table summary="Календарь" id="wp-calendar">

Написан простой js-скрипт

$('#1-calenheader').click(function() {
		$('#1-calenheader').hide();
  		$("#calendar-3").show("slow");		
	});	
	$('#calendar-3').click(function() {
		$("#calendar-3").hide("slow");
		$('#1-calenheader').show("slow");  		
	});

#1-calenheader – это миниверсия календаря.
Т.е. когда кликаешь на календаре он исчезает (заменяется миниатюрной версией).
Надо сделать так, чтобы по таблице с календарём можно было кликать и календарь большая версия не исчезал, а если кликнуть на фон, то исчезал.
Как я понял надо отлавливать событие нажатия таблицы с календарём и дальше событие не всплывало, по пузырьковой модели событий - надо запретить всплытие события на календарь. «Обрезать» событие click на внутренние теги. Как это программно реализовать?

P.S. «Рыба» примера находится здесь http://share.seedmoney.ru/Pioner1.zip

Именно, не давать событию всплыть. Используйте для этого .stopPropagation

<style type="text/css">
	.wrapper {
		float: left;
		padding: 10px;
		background: #f0f0f0;
		border: solid #cccccc 1px;
		overflow: hidden;
	}
	.inner {
		float: left; display: inline;
		width: 30px;
		height: 30px;
		margin: 10px;
		background: lightgrey;
		border: solid #cccccc 1px;
	}
</style>

<div class="wrapper">
	<div class="inner"></div>
	<div class="inner"></div>
	<div class="inner"></div>
	<div class="inner"></div>
</div>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
	$(".wrapper, .inner").click(function(e){
		$(this).fadeTo(0, .5).fadeTo(200, 1);
*!*
		e.stopPropagation();
*/!*
	})
</script>

Спасибо, всё работает :)

Вот полная версия программы.

$(document).ready(function() {
	$('#1-calenheader').click(function() {
		$('#1-calenheader').hide();
  		$("#calendar-3").show("slow");		
	});	
	$('#calendar-3').click(function() {
		$("#calendar-3").hide("slow");
		$('#1-calenheader').show("slow");  		
	});
	$('#wp-calendar').click(function(e){
		e.stopPropagation();
	});
});