Фокус и размытие событий для HTMLDivElement?

Question

Я реализовал собственный выпадающий список с HTML, CSS и JavaScript. Это работает хорошо сейчас, но я не доволен тем, как я делаю "размывание" прямо сейчас. Когда вы открываете список, а затем щелкаете где-то еще, он должен свернуться. Что я сделал, так это добавил прослушиватель событий (mousedown) к window после расширения списка и удаления слушателя после свертывания. Событие в основном проверяет, произошло ли событие DOM на правом элементе, используя target, а если нет, то размытие раскрывающегося элемента управления.

Я знаю о focus и blur. Однако кажется, что они работают только с элементами формы, что я нахожу вполне понятным. Они также поддерживают другие сценарии, такие как «табулирование».

В любом случае, я спрашиваю вас, есть ли лучший способ сделать то, что я делаю сейчас. То, что я делаю, просто кажется глупым.

Answer 1

Возможно, вы могли бы иметь фиктивный ввод и сфокусировать его, когда элемент управления активен. Затем посмотрите размытие и закройте список. Он не может быть display:none, но может быть opacity:0 или просто вне поля зрения.

Answer 2

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

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