решил сделать типа самописного комбобокса и столкнулся с проблемкой:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example</title>
<style>
.list {
position: absolute;
background-color: white;
margin: 5px 0px 5px 0px;
border: 1px solid black;
z-index: 5000;
width: 200px;
}
.list div:hover {
background-color: yellow;
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" value="234" onfocus="f(this);">
<div class="list" onclick="s(this, event)" style="display: none;">
<div>111111</div>
<div>222222</div>
<div>333333</div>
</div>
<script>
var menu = document.querySelector('.list'),
input = document.querySelector('input');
contextMenuList = [];
function f (ths) {
menu.style.display = 'block';
contextMenuList.push(menu, input);
}
function s (ths, event) {
var v = event.target.innerHTML;
input.value = v;
if (v == '222222')
return;
ths.style.display = 'none';
contextMenuList.length = 0;
}
window.document.onclick = function (e) {
var ln = contextMenuList.length,
el = e.target;
if (ln == 0 ) {
return;
}
do {
for (var i = 0; i < ln; ++i) {
if (el === contextMenuList[i]) {
return;
}
}
} while (el = el.parentNode);
contextMenuList[0].style.display = 'none';
contextMenuList.length = 0;
}
</script>
</body>
</html>
вообщем суть в чем. когда нажимаешь на инпут всплывает контекстное меню, когда выбираешь что либо, то идет присвоение и менюшка может закрываться, и может не закрываться.
но. когда кликаешь не по инпуту то менюшка закрыться должна обязательно. вверху показан пример как сделал я. может это ахинея)) есть какие то стандартные алгоритмы по этому поводу?