Форум

skrudjmakdak · #1 (**permalink**) 20.01.2015, 16:00

может уже поднималась тема. если да, прошу ткнуть. вообщем есть инпут. вешаем события:

<!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?

ruslan_mart · #2 (**permalink**) 20.01.2015, 16:09

Сначала будет вызван blur, затем click.

skrudjmakdak · #3 (**permalink**) 21.01.2015, 09:06

Сообщение от Ruslan_xDD

Сначала будет вызван blur, затем click.

это если ты кликнешь, а если нажмешь таб? то сработает только blur. программно можно увидеть очередь event'ов?

danik.js · #4 (**permalink**) 21.01.2015, 10:53

Какая еще очередь? Ее просто нет.

Нужна последовательность событий - вешай обработчики и логируй все события для себя.

danik.js · #5 (**permalink**) 21.01.2015, 10:54

Сообщение от skrudjmakdak

1) кликом по чем нибудь

Вообще-то, mousedown. Если его отменить - фокус не уйдет.

skrudjmakdak · #6 (**permalink**) 21.01.2015, 15:52

допустим есть контекстное меню (через жопу, на сколько успел накидать)

<!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>

нужно сворачивать, если потерялся фокус у инпута или нажали не на дивку с инпутом

skrudjmakdak · #7 (**permalink**) 21.01.2015, 16:05

можно это как то упростить?))

<!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>

skrudjmakdak · #8 (**permalink**) 21.01.2015, 16:24

где инпут в дивке? нет. нитам нитам

ruslan_mart · #9 (**permalink**) 21.01.2015, 16:36

Сообщение от skrudjmakdak

нажали не на дивку с инпутом

Нет смысла. Меню же все равно исчезнет, даже при нажатии на само меню. Поэтому просто:

window.onclick = input.onblur = function() {
    menu.style.display = 'none';
};

skrudjmakdak · #10 (**permalink**) 22.01.2015, 08:13

Ruslan_xDD,
тогда вообще не надо событие на window ставить:

input.onblur = function() {
    menu.style.display = 'none';
};

т.к. blur выскакивает первым, чем click по window. но прикол тогда в том, что если мы закроем меню при blur то события клика по этому меню мы не увидим

Форум

Справочник

Discord чат

Курсы javascript