<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
var one = document.getElementById("one"), two = document.getElementById("two");
two.onclick = function(e) {
e = e || window.event;
if(two.style.backgroundColor == "red") two.style.backgroundColor = "yellow";
else two.style.backgroundColor = "red";
};
one.onclick = function(e) {
e = e || window.event;
if(e.eventPhase === 3) return; // если событие вызвалось от всплытия из дочернего элемента то выйти из обработчика
two.style.backgroundColor = "red";
};
};
</script>
<style type="text/css">
#one {
width: 200px;
height: 200px;
}
#two {
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="one" style="background: red;">
one
<div id="two" style="background: yellow;">
two
</div>
</div>
</body>
</html>