очередь событий
может уже поднималась тема. если да, прошу ткнуть. вообщем есть инпут. вешаем события:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script>
function b(e) {
console.log(e);
}
window.onclick = function (e) {
console.log(e);
}
</script>
<input type="text" onblur="b(event)">
</body>
</html>
такой эксперимент: наводим фокус на инпут. и теперь у нас есть 2 варианта его потерять: 1) кликом по чем нибудь 2) и обычным табом можно с помощью event проследить список вызываемых событий? т.е. будет вызван только blur или blur and click? |
Сначала будет вызван blur, затем click.
|
Цитата:
|
Какая еще очередь? Ее просто нет.
Нужна последовательность событий - вешай обработчики и логируй все события для себя. |
Цитата:
|
допустим есть контекстное меню (через жопу, на сколько успел накидать)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" onblur="b(event)" onfocus="f(event)">
<div style="display: none;"></div>
<script>
var div = document.querySelector('div');
function f(e) {
div.style.display = 'block';
}
function b(e) {
console.log(b);
}
window.onclick = function (e) {
if (e.target === document.body) {
div.style.display = 'none';
}
}
</script>
</body>
</html>
нужно сворачивать, если потерялся фокус у инпута или нажали не на дивку с инпутом |
можно это как то упростить?))
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" onblur="b(event)" onfocus="f(event)">
<div style="display: none;"></div>
<script>
var div = document.querySelector('div'),
input = document.querySelector('input');
function f(e) {
div.style.display = 'block';
}
function b(e) {
console.log(lastKeyDown);
if (lastKeyDown == 9) {
div.style.display = 'none';
}
}
var lastKeyDown = null;
window.onkeydown = function (e) {
lastKeyDown = e.keyCode;
}
window.onclick = function (e) {
if (e.target != div && e.target != input) {
div.style.display = 'none';
}
}
</script>
</body>
</html>
|
где инпут в дивке? нет. нитам нитам
|
Цитата:
window.onclick = input.onblur = function() {
menu.style.display = 'none';
};
|
Ruslan_xDD,
тогда вообще не надо событие на window ставить:
input.onblur = function() {
menu.style.display = 'none';
};
т.к. blur выскакивает первым, чем click по window. но прикол тогда в том, что если мы закроем меню при blur то события клика по этому меню мы не увидим |
skrudjmakdak, если меню будет исчезать плавно через transition, то увидим по идее. Или скрывать меню не сразу, по минимальному setTimeout`у.
Но я бы на твоём месте забыл про blur, сделал бы по клику и проверял бы, что если клик произошёл не по input, то меню скрываем, а если по input - открываем.
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<input id="test" type="text">
<div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>
<script>
var menuIsHide = true;
window.addEventListener('click', function(e) {
var self = e.target;
if(self.id == 'test' == menuIsHide) {
menu.style.display = menuIsHide ? 'block' : 'none';
menuIsHide = !menuIsHide;
}
});
</script>
</body>
</html>
|
ну без таба у меня и так работает)))
|
skrudjmakdak, :)
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<input id="test" type="text">
<div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>
<script>
var menuIsHide = true;
test.onblur = function() {
menu.style.display = 'none';
menuIsHide = true;
};
window.addEventListener('click', function(e) {
var self = e.target;
if(self.id == 'test' == menuIsHide) {
menu.style.display = menuIsHide ? 'block' : 'none';
menuIsHide = !menuIsHide;
}
});
</script>
</body>
</html>
|
Или так:
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<input id="test" type="text">
<div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>
<script>
var menuIsHide = true;
window.onclick = test.onblur = function(e) {
var self = e.target;
if(e.type == 'blur' || (self.id == 'test' == menuIsHide)) {
menu.style.display = menuIsHide ? 'block' : 'none';
menuIsHide = !menuIsHide;
}
};
</script>
</body>
</html>
|
посм чуть попозже, ща занят
|
Цитата:
|
danik.js, сам индеец. :D Я в английском не силён, так что пофиг. :)
|
я задолблю)) не работает, выше писал почему
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<input id="test" type="text">
<div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px" onclick="c(event)">
<div>1</div>
<div>2
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>3</div>
</div>
<script>
var menuIsHide = true;
window.onclick = test.onblur = function(e) {
var self = e.target;
if(e.type == 'blur' || (self.id == 'test' == menuIsHide)) {
menu.style.display = menuIsHide ? 'block' : 'none';
menuIsHide = !menuIsHide;
}
};
function c(e) {
console.log(e.target);
}
</script>
</body>
</html>
http://javascript.ru/forum/events/53...tml#post352603 |
skrudjmakdak, если blur убрать, то работает. :) Наверное проще просто запретить табуляцию по полю. :)
|
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<input id="test" type="text">
<div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px" onclick="c(event)">
<div>1</div>
<div>2
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>3</div>
</div>
<script>
var menuIsHidden = true;
window.onclick = window.onkeydown = function(e) {
var self = e.target;
if(self.id == 'test' == (menuIsHidden || e.type == 'keydown' && e.keyCode == 9)) {
menu.style.display = menuIsHidden ? 'block' : 'none';
menuIsHidden = !menuIsHidden;
}
};
function c(e) {
console.log(e.target);
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:58. |