div и onblur
Есть окно которое появляется при onclik в input. Окно представляет собой таблицу с кучей кнопок и текста. Как сделать так чтобы при клике вне таблице она исчезала(удалялась). Примерно так работает datapicker в jquery.
Я перепробывал много вариантов но все они работали по разному в разных браузерах. Кто как справляется с такой проблемой? P.S. В названии темы стоит div для понятности. Я могу обернуть table в div, сути дела не меняет. |
способы разные, мне нравится накрыть всё прозрачным (или не очень) div-ом, по клику на него скрывать
|
Впринципе интересный способ.Я даже когда то такой пробовал - проблема только была с высотой этого прозрачного дива, если страница была больше экрана. Но мне в данном случае не подойдёт.
|
position: fixed; height: 100%; width: 100%; z-index: 100;
у окна соответственно z-index больше |
Когда я делал заливку экрана то height: 100% довало заливку экрана, а размер страницы увеличевался посредством ajax. Поэтому надо было вычеслять реальный размер текущего экрана. Каждый браузер это делал по разному. Вобщем как всегдаобычный геморой на пустом иесте. Нюансов я не помню давно было. Но мне сейчас такой подход не подходит.
Пока делаю на лютых граблях. Примерно так:
function hide_all(ev) {
var tgt = window.event ? window.event.srcElement : ev.target;
if (tgt.parentNode.className !== "cd_tbl") {
input.parentNode.removeChild(cd_table);
document.onclick = ''
}
}
document.onclick = hide_all;
где cd_table - таблица input - input при клике по каторому создаётся таблица. эта функция вызывается в конце создания таблици Вылез очередной геморой - какогото hide_all вызывается сразу и при этом объект который вызвал onclick это input Сейчас ищу как обнулить onclick перед строчкой document.onclick = hide_all но походу такого понятия в javascript нету. |
моя реализация blur && focus
<!DOCTYPE HTML>
<html>
<head>
<style>
#block {
width:200px;
height:200px;
border:4px solid red;
display:none;
}
body {
border:2px solid black;
}
</style>
</head>
<body >
<a href='#' id='action' >open/close</a>
<div id='block'>
wereasrwer
<input type='text'>
<div>
<input type='text'>
</div>
</div>
<div id='inform'></div>
<script>
function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
function Focus_and_Blur(opt){
var elem = opt.elem, focusForElem;
var body = document.body;
elem.setAttribute('tabindex',-1);
body.setAttribute('tabindex',-1);
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
body.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
body.onfocusin = onDocumentFocus;
}
function onFocus(e) {
focusForElem = true;
event.cancelBubble = true;
opt.focus.call(this,e);
}
function onDocumentFocus (e) {
if (focusForElem) {
if(parent(e))return;
focusForElem = false;
opt.blur.call(elem,e)
}
}
function parent (e) {
var target = e.target || event.scrElement;
var parent = target;
while (parent && parent != elem) {
parent = parent.parentNode;
}
return parent == elem;
}
};
var elem = document.getElementById('block');
Focus_and_Blur({
elem:elem,
focus:function (e) {
_("#inform").innerHTML = 'focus on '+ this.id;
},
blur: function (e) {
_("#inform").innerHTML = 'blur '+ this.id;
elem.style.display = '';
}
});
_("#action").onclick = function () {
elem.style.display = 'block';
elem.focus();
}
</script>
</body>
</html>
|
Цитата:
второй способ: вешать обработчик клика на body, но отсекать те из них, которые идут от таблицы и её дочерних элементов |
| Часовой пояс GMT +3, время: 10:32. |