Размытие события на выбранных коробках и Firefox

Question

У меня следующая ситуация:

Один блок выбора и всплывающая подсказка, которая появляется, когда пользователь нажимает на блок, чтобы выбрать опцию. Показать подсказку можно легко с помощью css (выберите:focus ~ .tooltip) или jquery, используя событие focus(). Когда пользователь что-то выбирает, окно выбора закрывается и всплывающая подсказка исчезает. Это можно сделать с помощью события change().

Но есть одна проблема. Если пользователь открывает окно выбора и щелкает где-то еще на странице, список закрывается, и в Firefox событие размытия не запускается сразу, поэтому подсказка остается видимой. Если пользователь делает второй щелчок вне выделенного объекта, запускается событие размытия и всплывающая подсказка исчезает.

Chrome и IE в порядке, Firefox нет.

Кто-нибудь знает обходной путь в Firefox?

спасибо Иштван

Answer 1

Поработав с этим около получаса, боюсь сказать, что мой вклад будет: нет. И по следующим причинам:

• Firefox не запускает событие размытия до второго щелчка. Это видно из просмотра выпадающего списка, который остается синим.
• Поэтому чистое CSS-решение определенно никогда не сработает
• Решение JavaScript также было бы почти невозможным, так как первый щелчок, кажется, никуда не денется
  • Я проверил это, пытаясь отметить щелчки тела и документа, и вы увидите, что ни один из них не срабатывает с первого раза. На самом деле, ни один не делает выбор, поэтому у меня есть на каком уровне этот клик регистрируется

Смотрите мой JSFiddle для моей работы. Сожалею! Я думаю, это просто проблема FF.

$(document).click(function() {
    console.log("document");
});
$("body").click(function() {
    console.log("body");
});
$("select").click(function(e) {
    e.stopPropagation();
    console.log("select");
});

Изменить: Извините, опубликовал старый JSFiddle.