[JCShen]

Вопрос родился по итогам стати Введение в события. Замечательная статья. Но задавшись элементарным вопросом, так и не смог реализовать его решение.

Смысл в следующем, создаем несколько вложенных слоев. (Как в примерах статьи) И на первый из них вешаем событие:

<style type="text/css">
.d1
{
	width:400px;
	height:400px;
	background:#0F0;
}

.d2
{
	width:300px;
	height:300px;
	background:#FF0000;
}

.d3
{
	width:200px;
	height:200px;
	background:#0000FF;
}
</style>

<div class="d1" id="d1" onmouseover="alert('test')">  
	<div class="d2" id="d2">  
		<div class="d3" id="d3"></div>  
	</div>  
</div>

Насколько я понял из стати div c id="d2" наследует событие от div c id="d1", и div c id="d3" наследует событие от div c id="d2"

Но вот как как ОСТАНОВИТЬ срабатывание события на "дочерних" к первому элементах, оставив по прежднему срабатывание алерта при событии на первом слое (с id="d1") на всей поверхности слоя, в т.ч. и перекрытой слоями d2 и d3.

Следующий JS код отменит срабатывание события для слоя d2 (и как следовательно для d3):

document.getElementById('d2').onmouseover = function(e)
{
	if (!e) e = event || window.event; // кросс-браузерно
	{
		e.cancelBubble = true;
		if (e.preventDefault) e.preventDefault();
	}
}

Но и для области слоя d1 перекрытому слоем d2 тоже отменит.

Обьясняя проще в IE с версии 5.5 была введена функция onmouseenter и она срабатывает именно так как мне и требуется. Но исползовать ее глупо. Т.к. решение не кроссбраузерное.

Очень надеюсь на помощь профессионалов. Если не примером кода то хотя бы тычком носом в статью или еще какой мануал. Где было бы разжевано как реализовать выше изложенное.