Похоже, что событие Blur останавливает работу обработчика событий щелчка? У меня есть поле со списком, где параметры отображаются только тогда, когда текстовое поле находится в фокусе. Выбор ссылки опции должен вызвать событие.
У меня есть пример скрипки: http://jsfiddle.net/uXq5p/6/
Для воспроизведения:
Ожидаемое поведение:
На шаге 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');
Я обнаружил на этом сайте еще несколько вопросов, связанных с аналогичными проблемами. Кажется, есть два решения:
Используйте задержку.Это плохо, потому что это создает состояние гонки между скрытием и обработчиком события щелчка. Это тоже неряшливо.
Используйте событие 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
), которое срабатывает перед размытием?