jquery focusin() и предотвращение всплытия

ОБНОВЛЕНИЕ 2:

Я выспался, а затем набросал пример кода, чтобы попытаться разобраться в проблеме.

Вот пример использования console.log firebug, чтобы показать вам, какой объект запускает событие focusin:

http://jsbin.com/axefo3/11

1) нажмите на первую ссылку: отображается желтый div 2) нажмите клавишу табуляции: она должна перейти в ссылку внутри желтого div

Он делает это, но затем вызывает событие focusin и по какой-то причине кажется, что он снова всплывает к красному div, которому приказано закрыть желтый div.

Это даже после того, как я сказал желтому div не распространять события focusin:

$('#innerDiv').focusin(function(e){e.stopPropagation()});

Затем я попытался прикрепить событие focusin к родительскому div только ПОСЛЕ того, как я сосредоточился на внутреннем div.

http://jsbin.com/axefo3/16

Что происходит, так это то, что переход к первой ссылке во внутреннем div действительно устанавливает событие focusin в родительском div. Это хорошо! Но затем при переходе к самой следующей ссылке внутри innerdiv событие focusin снова закрывает div.

Так что, думаю, я все еще в тупике. Похоже, я не могу остановить пузырение фокусина. Мысли? Теории?

Оригинал поста ниже...

============================

Я показываю div через событие onclick. Если вы щелкнете за пределами div, я хочу скрыть его. Для этого я привязываю однократное событие клика к телу:

$('body').one('click.myDivPopup', function(e) {
    ...close my div...
});  

Внутри самого div я говорю ему не распространять события, чтобы фактическое нажатие внутри div не вызывало щелчок по телу:

$myDiv.click(function(e){e.stopPropagation()});

Это отлично работает, как задумано.

Я также хочу скрыть div, если вы выходите из div.

Я думал, что в этом сценарии я мог бы использовать событие focusin для тела:

$('body').one('focusin.myDivPopup', function(e) {
    ...close my div...
}); 

Опять же, я не хочу, чтобы события всплывали из самого div, поэтому добавил это:

$myDiv.focusin(function(e){e.preventDefault()});

Это не работает. Изменение фокуса внутри элементов внутри myDiv вызывает событие focusin для тела.

Может быть, это ошибка в jQuery? Если да, то есть ли лучший способ сделать это?

ОБНОВИТЬ:

Проблема, по-видимому, в том, что нет никакого способа определить, потерял ли DIV фокус, поскольку он никогда не может иметь фокус. Моя логика решения заключалась в том, чтобы увидеть, было ли что-то ДРУГОЕ в фокусе, которое было вне div (следовательно, используя focusin), но я сталкиваюсь с проблемой событий focusin внутри div, которые, по-видимому, всплывают там, вызывая его на теле.

На данный момент я думаю, что мое решение должно состоять в том, чтобы добавить элемент CLOSE во всплывающее окно, а затем заставить людей явно активировать его. Однако это не идеально, особенно для навигации с помощью клавиатуры.


person DA.    schedule 16.03.2010    source источник
comment
Каким было окончательное решение (если оно было)?   -  person Micaël Félix    schedule 29.07.2013
comment
@MykaEyl Это было давно. :) Я считаю, что в конце концов решение было дизайнерским решением, чтобы убедиться, что во всплывающих окнах есть «закрывающие» ссылки, которые можно активировать, чтобы закрыть DIV. Пользователи с мышью по-прежнему могли щелкнуть в любом месте за пределами div, но пользователям клавиатуры приходилось явно закрывать div.   -  person DA.    schedule 29.07.2013


Ответы (2)


Не было бы проще отобразить 2 div. Один прозрачный (невидимый) div, который покрывает всю страницу, а другой вы действительно хотите показать. Тогда вам просто нужно установить z-index правильное тело ‹ invisblediv ‹ contentdiv.

Затем зарегистрируйте событие щелчка для невидимого div и при нажатии удалите оба. Законченный. По крайней мере, так большинство из них, например. модальные диалоговые плагины jquery работают, я думаю

Демо http://jsbin.com/uzoyo/3

person jitter    schedule 16.03.2010
comment
Не уверен, что это проще, но это был бы вариант. Однако не уверен, что div может сфокусироваться. - person DA.; 17.03.2010
comment
это работает для нажатия, но не для табуляции. В вашем примере покажите div, затем щелкните текст (чтобы фокус находился внутри div), затем нажмите TAB, чтобы выйти из div. Мне нужно, чтобы div исчез в обоих сценариях (щелчок где-то еще или табуляция из div). Цель состоит в том, чтобы приспособить навигацию с помощью клавиатуры. - person DA.; 17.03.2010
comment
..умная! Увы, это все еще своего рода хак, так как это просто проверка нажатия клавиши табуляции. Возможно, мне просто придется это сделать (см. выше раздел ОБНОВЛЕНИЕ). Тем не менее, можно было выйти из div с помощью клавиатуры любым другим способом. - person DA.; 17.03.2010

Если вы хотите использовать focusin, но не использовать всплытие событий, почему бы вам просто не использовать focus...?

person Will Morgan    schedule 10.06.2010