Событие размытия останавливает работу события щелчка?

Похоже, что событие Blur останавливает работу обработчика событий щелчка? У меня есть поле со списком, где параметры отображаются только тогда, когда текстовое поле находится в фокусе. Выбор ссылки опции должен вызвать событие.

У меня есть пример скрипки: http://jsfiddle.net/uXq5p/6/

Для воспроизведения:

  1. Выберите текстовое поле
  2. Появятся ссылки
  3. Щелкните ссылку
  4. Даже происходит размытие, и ссылки исчезают
  5. Больше ничего не происходит.

Ожидаемое поведение:

На шаге 5 после появления размытия щелчок должен также срабатывать. Как мне это сделать?

ОБНОВЛЕНИЕ:

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

Например:

$('#ShippingGroupListWrapper').css('left','-20px');

работает нормально, но

$('#ShippingGroupListWrapper').css('left','-2000px');

предотвращает событие щелчка.

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

Другие факторы, препятствующие обработке события щелчка:

$('#ShippingGroupListWrapper').css('z-index','-20');
$('#ShippingGroupListWrapper').css('display','none');
$('#ShippingGroupListWrapper').css('visibility','hidden');
$('#ShippingGroupListWrapper').css('opacity','.5');

Я обнаружил на этом сайте еще несколько вопросов, связанных с аналогичными проблемами. Кажется, есть два решения:

  1. Используйте задержку.Это плохо, потому что это создает состояние гонки между скрытием и обработчиком события щелчка. Это тоже неряшливо.

  2. Используйте событие mousedown . Но это тоже не лучшее решение, поскольку click является правильным событием для ссылки. Поведение mousedown противоречит интуиции с точки зрения UX, особенно потому, что вы не можете отменить щелчок, убрав указатель мыши с элемента перед тем, как отпустить кнопку.

Я могу придумать еще несколько.

3. Используйте mouseover и mouseout на ссылке , чтобы включить / выключить событие размытия для поля. Это не работает с клавиатурой табуляции, так как мышь не задействована.

4. Лучшим решением будет что-то вроде:

$('#ShippingGroup').blur(function()
{
   if($(document.activeElement) == $('.ShippingGroupLinkList'))
      return; // The element that now has focus is a link, do nothing
   $('#ShippingGroupListWrapper').css('display','none'); // hide it.
}

К сожалению, $ (document.activeElement) , кажется, всегда возвращает элемент body, а не тот, который был нажат. Но, возможно, если бы существовал надежный способ узнать: 1. какой элемент сейчас имеет фокус или два, какой элемент вызвал размытие (а не какой элемент размывается) из обработчика размытия. Кроме того, есть ли какое-либо другое событие (помимо mousedown ), которое срабатывает перед размытием?

61
задан Nick 18 February 2012 в 04:21
поделиться