Firefox css не реагирует на javascript размытие - PullRequest
Новая
       204

Firefox css не реагирует на javascript размытие

0 голосов
/ 17 марта 2020

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

<ul>
 <li>
  <a href="javascript:void(0);" class="label">menu1</a>
  <div class="menu">Raz Dwa Trzy</div>
 </li>
 <li>
  <a href="javascript:void(0);" class="label">menu1</a>
  <div class="menu">Vier Fünf Sechs</div>
 </li>
</ul>

И css выглядит примерно так: 

.menu { max-height:0; }
.label:focus + .menu { max-height:200px; }

Теперь это прекрасно работает во всех браузерах: метка является привязкой, следовательно, принимает фокус; Вы нажимаете на это, меню показывает. Чтобы скрыть, вы щелкаете в другом месте = размытие метки.
Однако было желательно, чтобы второй щелчок на метке также скрывал меню. Поэтому я добавил этот скрипт, чтобы переопределить нормальное поведение фокусировки: 

for (var i=0; i<menu_labels.length; i++) {
    menu_labels[i].addEventListener('mousedown', function(e){ 
        e.preventDefault();
        adjustFocus(this);
    });
}

function adjustFocus(elem) {
    if (elem === document.activeElement) {
        console.log('elem has focus, let\'s blur it'); 
        elem.blur();
    }
    else {
        console.log('elem has no focus, let\'s focus it'); 
        elem.focus();
    }
}

Это прекрасно работает в Chrome и Edge. Только не в Firefox.
Дело не в том, что скрипт не размывает элемент; Вы можете проверить различными способами, что технически метка больше не является активным элементом. Firefox, похоже, не применяет правило css соответственно, или не обновляет представление после изменения фокуса.
Любые мысли и идеи очень ценятся. Спасибо!! Cheers

--- edit: похоже, что protectDefault () не работает в FF, и я не осознавал, что это действительно проблема. Об этой проблеме сообщалось, но я не нашел никакого недавнего решения. Расследовать это дальше.

1 Ответ

0 голосов
/ 17 марта 2020

Похоже, это связано с другими проблемами фокусировки / размытия в Mozilla, которые я видел ранее. Например, вот этот: Javascript - Firefox размытие поведения при щелчке мышью. Ошибка?

Возможный обходной путь, который я бы предложил, заключается в том, чтобы вместо того, чтобы в коде выше вы называли elem.blur();, вы фокусировались на каком-то неэкранном или невидимом элементе, который эффективно размыл бы элемент, который был в фокусе до этого момента.

...