Спрятать блок по щелчку в другое место

[Dazar]

Есть всплывающая контекстная менюшка, которая высвечивается, если кликнуть по элементу. Как сделать, чтобы она пряталась при клике в любое другое место, кроме как не по ней? Как это обычно делают?
У меня есть два варианта:
1) Поставить всему документу событие onclick, а самой менюшке убрать его.
2) одновременно с менюшкой показывать прозрачный div на весь документ, с меньшим, чем у неё z-индексом, с событием onclick, которое будет прятать и этот див, и меню.

Есть ещё какие-нибудь способы?

[bes]

<button class="but">click</button>
<div id="div" style="display: none; background: lightgreen">
	<button>button</button>
	text
</div>

<script>
window.onload = function () {
	function sh(elem) {
		if (elem.style.display != 'block') {
			elem.style.display = 'block';
		} else {
			elem.style.display = 'none';
		}
	}

	var div = document.getElementById('div');
	
	document.body.onclick = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.className == 'but') {
			sh(div);
		} else {
			while (target && target != div) {
				target = target.parentNode;
			}
			if (target != div) {
				div.style.display = 'none';
			}
		}
	}

}
</script>

[Dazar]

То есть мой первый вариант,только куда больше продуманный. Спасибо.

[bes]

Не совсем так, в первом случае был клик по "фону", а здесь идёт отсечение клика для всех элементов меню, включая само меню.
Если не требуются дополнительные элементы, которые должны участвовать в процессе (быть кликабельными и т.п.) при открытом меню, то первый вариант, на мой взгляд, лучше, так как требует меньше вычислений.

[Dazar]

Сейчас очень долго ресчленял ваш код, увидел и ту тонкость, о которой вы говорите. Поскольку мне нужно было только закрытие дива, и значительную часть листа у меня занимает просто фон(не входит в body), у меня осталось это:

document.onclick = function (e) {
var div = document.getElementById('menu');
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.className != 'but') {
			while (target && target != div) {
				target = target.parentNode;
			}
			if (target != div) {
				div.style.display = 'none';
			}
		}
	}

Спасибо большое.