Есть три div'а (d1, d2 и d3). Надо сделать так, чтоб при событии focus() какого-либо из них, фон d1 становился синим. А при потере фокуса d1, d2, d3 в пользу элементов, которые стоят выше d1 по дереву DOM - красным. И
вот что я сделал:
<div id="d1" tabindex="-1">
<div id="d2" tabindex="-1">d2</div>
<div id="d3" tabindex="-1">d3</div>
</div>
#d1 {
background-color: red;
border: 1px dashed white;
margin: 50px auto;
width: 600px;
}
#d2,
#d3 {
background-color: green;
border: 1px dashed red;
margin: 50px auto;
width: 300px;
height: 100px;
}
var d1 = document.getElementById('d1');
if (window.addEventListener) {
d1.addEventListener('focus', d1Focus, true);
d1.addEventListener('blur', d1Blur, true);
} else if (window.attchEvent) {
d1.attachEvent('onfocusin', d1Focus);
d1.attachEvent('onfocusout', d1Blur);
}
function d1Focus() {
d1.style.backgroundColor = 'blue';
}
function d1Blur() {
alert(1); // Это для того, чтобы понять, в какие моменты происходит событие blur.
d1.style.backgroundColor = 'red';
}
Проблема в том, что blur происходит даже тогда, когда фокус перемещается между/на его дочерних элементов. Как исключить событие blur при перемещении фокуса между d1, d2 и d3?
