Javascript-форум - onfocus & onblur

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - onfocus & onblur (https://javascript.ru/forum/dom-window/49274-onfocus-onblur.html)

onfocus & onblur

здравствуйте,я новичок нужна помощ...
я пишу крестики нолики на js, установил onfocus и onblur на элемент div,после фокуса на него появляются 2 блока с картинкой X и O,при клике на одного из них div получает картику,но когда я ставлю onblur на этот div для скрытия двух блоков картинок,почему то перестайт действовать функция для смены картинки div-а...
заранее спасибо за помощь

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/style.css" type="text/css" rel="stylesheet">

<title>X & O</title>

</head>

<body> 

<ul>
<li>
<div tabindex="">
<img />
<p>
<button><img src="images/x.png"></button>
<button><img src="images/o.png"></button>
</p>
</div>

<div tabindex="">
<img />
<p>
<button><img src="images/x.png"></button>
<button><img src="images/o.png"></button>
</p>
</div>

<div tabindex="">
<img />
<p>
<button><img src="images/x.png"></button>
<button><img src="images/o.png"></button>
</p>
</div>
</li>

</ul>

<script type="text/javascript" src="script/script.js"></script>
</body>
</html>

var field=document.getElementsByTagName("div");
for(var i=0;i<field.length;i++){
	
	field[i].onfocus=function(){
	var x_o = this.getElementsByTagName("button");
	for (var j = 0; j < x_o.length; j++) {
		x_o[j].style.display = "block";	
		x_o[j].onclick=function(){
			var image = this.getElementsByTagName("img")[0].src;
			this.parentNode.parentNode.getElementsByTagName("img")[0].src = image;
			this.parentNode.style.display="none";
		}
	}	
	}
	field[i].onblur=function(){
	var x_o = this.getElementsByTagName("button");
	for (var j = 0; j < x_o.length; j++) {
			x_o[j].style.display = "none";
	}
	};
	
};

Grigor.918,
как уже сказали, у элемента div нет фокуса, но его можно имитировать. Отслеживаешь на какой элемент был онклик, записываешь данные этого элемента в переменную(onfoc, например) и выполняешь соответствующую функцию.
Потом проверяешь другие клики, если кликнули на тот же самый элемент, то ничего не делаешь, а если на новый, то выполняешь свой онблюр на элементе записанном в onfoc, перезаписываешь туда новый элемент и выполняешь на нём соответствующую функцию для онфокус.

Rise,
Safort,
Если нефокусябельному элементу проставить tabindex = 0, то элемент будет будет фокусится при клике, если tabindex > 0, то еще и с клавиатуры. Ваш КО.

WorM32,
о, годный совет.

Цитата:

Сообщение от Rise (Сообщение 324595)

Потому что при клике по картинке происходит onblur и до смены картинок дело не доходит, выполняется onblur.

Rise спасибо за советы,но я понимаю тот факт что во время клика дело не доходит до функции смены,вопрос в том можно ли с помощю setTimeout задержать onblur для див????????????,тоесть пусть функия смены работает а после несколько секунд выполнится и onblur

Цитата:

Сообщение от Safort (Сообщение 324536)

Safort что то вроде мне в голову приходило но не знал как можно реализовать,большое спасибо за совет

Цитата:

Сообщение от Rise (Сообщение 324612)

Ну, так можно):

field[i].onblur = function() {
    var x_o = this.getElementsByTagName("button");
    for (var j = 0; j < x_o.length; j++) {
        (function(k){
            setTimeout(function(){ x_o[k].style.display = "none" }, 100);
        })(j);
    }
};

Rise большое спасибо очень помог мне,РЕСПЕКТ )))

Цитата:

Сообщение от Rise (Сообщение 324612)

Ну, так можно):

field[i].onblur = function() {
    var x_o = this.getElementsByTagName("button");
    for (var j = 0; j < x_o.length; j++) {
        (function(k){
            setTimeout(function(){ x_o[k].style.display = "none" }, 100);
        })(j);
    }
};

Еще одна маленькая просьба,можеш в двуз словах сказать что происходит в этих строках которые ты дабавил???
особенно я не понял момент (j),ну синтаксис тут какой??