очередь событий
может уже поднималась тема. если да, прошу ткнуть. вообщем есть инпут. вешаем события:
<!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 то события клика по этому меню мы не увидим |
| Часовой пояс GMT +3, время: 10:18. |