Вопрос родился по итогам стати
Введение в события. Замечательная статья. Но задавшись элементарным вопросом, так и не смог реализовать его решение.
Смысл в следующем, создаем несколько вложенных слоев. (Как в примерах статьи) И на первый из них вешаем событие:
<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 и она срабатывает именно так как мне и требуется. Но исползовать ее глупо. Т.к. решение не кроссбраузерное.
Очень надеюсь на помощь профессионалов. Если не примером кода то хотя бы тычком носом в статью или еще какой мануал. Где было бы разжевано как реализовать выше изложенное.
