Почему функция focusin внутри blur не срабатывает?

Question

[Георгий]

Всем привет.

Столкнулся тут с проблемой. Подумал, может вы поможете мне.

Есть всплывающее окошко(div#loginbox), внутри которого есть input. Этот div может получать фокус.

Мне нужно, чтобы при клике вне этого окошка, div#loginbox пропадал. Сделать я это решил через blur евент. Но в данный момент при фокусе на input

var art = false;<br>
$('#loginbox').blur(function(){<br>
	$(this).focusin(function(){<br>
		art = true;<br>
	});<br>
	console.log(art); //В любом случае false.. Из-за этого срабатывает if снизу, хотя не должен..<br>
	if(!art) {<br>
		$('#loginbox').stop().fadeOut('fast',function(){<br>
			$('#loginlink').prop('href','#login');<br>
			window.location.hash = '#';<br>
		});<br>
		$('#loginlink').removeClass('selected');<br>
		$('.tooltip').css('display','none');<br>
		Cufon.refresh();<br>
	}<br>
});<br>

Заранее благодарю за помощь! :)

Comments

[Riateche]

Дайте соответствующий фрагмент HTML, без него ничего не понятно. А лучше создайте примерчик на jsfiddle.net/.

Вместо $('.tooltip').css('display','none'); лучше использовать $('.tooltip').hide();.

[Георгий]

Вот

Answer 1

[Vitaliy Petrychuk]

Я старась делать так: stackoverflow.com/a/2868645/1104483

Comments

[Vitaliy Petrychuk]

jsfiddle.net/FtTCJ/1/

Answer 2

[creage]

Плохой подход. У вас при фокусе инпута срабатывает блур диалога, что очевидно — фокус сменен с одного элемента на другой.

Как бы сделал я — снизу диалога показываем полупрозрачный (или вообще прозрачный) див на весь экран, по клику на нем прячем диалог. Все элементарно.

P.S. И да — почитайте доки jQuery — ваш код без слез читать нельзя.

Comments

[Георгий]

У вас при фокусе инпута срабатывает блур диалога, что очевидно — фокус сменен с одного элемента на другой.

В чем проблема? focusin event

Я тоже так обычно делаю, но в данном случае, требуется именно так, чтобы интерфейс(кнопочки и тп) вне всплывающего окошка оставались работоспособными, что невозможно при «полупрозрачном» диве на весь экран.

P.S. А что вам в моем коде не понравилось, кроме $('.tooltip').css('display','none')
P.S.S. Не юзал hide, потому что меняю еще и другие css свойства, но удалил для вопроса… :)

[Георгий]

Кстати, такой же подход c окошком логина на dropbox.com

[creage]

stackoverflow.com/questions/9577971/focus-and-blur-jquery-events-not-bubbling оно?

Answer 3

[Анатолий]

Не идеальный вариант, но вполне работоспособный.

$(document).delegate('click', function(){
    if( $(this).closest('#loginbox') !== null )
    {
        $('#loginbox').hide();
    }
});

Comments

[creage]

А если сзади фрейм?)