Как скрыть меню при нажатии на любую другую область?

Question

[WoodyAndBuzz]

Есть код при нажатии на кнопку которого появляется всплывающее меню. Однако чтобы убрать его надо нажать на ту же кнопку. А хотелось бы чтобы окно исчезало при нажатии на любую область вне окна.

<div class="form-menu">
                            <button class="form-browse"><p>Browse &#x25BE</p></button> 
                            <div id="drops" class="drop-size drop-1">
                                <div class="drop-flex">
                                    <h3 class="drop-h3">Women</h3>
                                    <ul class="drop-menu">
                                        <li><a href="" class="drop-link">Dresses</a></li>
                                        <li><a href="" class="drop-link">Tops</a></li>
                                        <li><a href="" class="drop-link">Sweaters/Knits</a></li>
                                        <li><a href="" class="drop-link">Jacets/Coats</a></li>
                                        <li><a href="" class="drop-link">Blazers</a></li>
                                        <li><a href="" class="drop-link">Legings/Pants</a></li>
                                        <li><a href="" class="drop-link">Skirts/Shots</a></li>
                                        <li><a href="" class="drop-link">Accessories</a></li>
                                    </ul>
                                    <h3 class="drop-h3">Men</h3>
                                    <ul class="drop-menu">
                                        <li><a href="" class="drop-link">Tees/Tank tops</a></li>
                                        <li><a href="" class="drop-link">Shirts/Polos</a></li>
                                        <li><a href="" class="drop-link">Sweaters</a></li>
                                        <li><a href="" class="drop-link">Sweatshirts/Hoodies</a></li>
                                        <li><a href="" class="drop-link">Blazers</a></li>
                                        <li><a href="" class="drop-link">Jackets/vests</a></li>                    
                                    </ul>
                                </div>
                            </div> 
                        </div>

const handleClick = (event) => {
             let name = document.getElementById("drops").classList.toggle("drop-1")
             event.preventDefault();
             console.log(name);
            }
        document.querySelector(".form-browse").addEventListener("click", handleClick);

Answer 1

[Сергей Соколов]

Ещё пара идей:

1. рисовать прозрачный div прямо под меню поверх всего остального и слушать click на нём – так любой клик «мимо меню» будет отловлен этим div'ом
   
2. слушать клик на корневом document – событие «всплывает» наверх, и если никто его раньше отловит, дойдёт до document. Этот способ менее надёжный, т.к. мимо меню можно кликнуть на другом элементе, где клики ловят и дальше не отпускают.
   

Answer 2

[BX442]

В JS есть событие, фокус/потеря фокуса, обрабатывая это событие, можно закрывать элемент при клике мышкой если элемент не в фокусе.
Если вам нужно научится, а не готовое решение, то почитайте Выразительный JavaScript: Обработка событий
Если образец готового, то вот:
Пример 1.
Пример 2.

Answer 3

[Beliyadm]

$(document).mouseup(function (e){
			var div = $(".form-menu");
			if (!div.is(e.target)
				&& div.has(e.target).length === 0 && div.is(':visible'))
				{
				div.hide();
			}
		});

Comments

[Сергей Соколов]

что скажут touch-устройства ?

[Beliyadm]

То же самое что и десктоп, клик\нажатие за пределами блока его скроют. Клики внутри отработают штатно.

[WoodyAndBuzz]

А просто на js как будет выглядеть? Я с jq не дружу.