Можно в принципе принимать решение скрывать или нет div, анализируя атрибуты parentNode:
<head>
<script type="text/javascript">
window.onload = function () {
document.onclick = function (e) {
e = e || window.event;
var a = false,
node = (e.target || e.srcElement);
while(node.parentNode) {
if(node.id == 'window') {
a = true;
break;
}
node = node.parentNode;
}
if(!a) {
document.getElementById('window').style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="window" style="position: absolute; top: 50px; left: 50px; background: red; width: 150px; height: 150px;"><div style="background: green; width: 50px; height: 50px;"></div><div style="background: blue; width: 50px; height: 50px;"></div></div>
</body>
или сравнивая координаты места клика и положения элемента:
<head>
<script type="text/javascript">
window.onload = function () {
document.onclick = function (e) {
e = e || window.event;
var div = document.getElementById('window'),
coords = getOffset(div);
if (e.clientX < coords.left || e.clientX > coords.left + div.offsetWidth || e.clientY < coords.top || e.clientY > coords.top + div.offsetHeight) {
div.style.display = 'none';
}
}
}
function getOffset(elem) {
if (elem.getBoundingClientRect) {
return getOffsetRect(elem)
} else {
return getOffsetSum(elem)
}
}
function getOffsetSum(elem) {
var top=0, left=0
while(elem) {
top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
elem = elem.offsetParent
}
return {top: top, left: left}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect()
var body = document.body
var docElem = document.documentElement
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
</script>
</head>
<body>
<div id="window" style="position: absolute; top: 50px; left: 50px; background: red; width: 150px; height: 150px;"><div style="background: green; width: 50px; height: 50px;"></div><div style="background: blue; width: 50px; height: 50px;"></div></div>
</body>
Проверял в 5 браузерах - Opera, FireFox, IE, Chrome, Safari. Везде работает.
