How do I detect if a mouse click is on empty "white space" or an element that's different from an open menu?

Ask the community
,
1

I have created a custom menu with checkboxes in them. I created a container box with a mouse click event to open and close the checkbox menu by showing and hiding it. However, I want to hide the menu if the mouse clicks an empty space or by clicking another element on the page. The code would detect if the menu is open and mouse click was on another element (e.g. search bar), and if so, close the checkbox menu. I’m just not sure what mouse click code to use. Can someone point me to the right bit of inbuilt code for this functionality?

2

You can do the flowing:

  1. Add a transparent box that spreads over the entire page.

  2. In this box put a transparent shape (rectangle) that spreads over the entire box.

  3. Put the open menu part (the checkbox) over the transparent shape.

  4. Make the transparent box collapsed on load.

  5. Add an event handler to open the box when the main menu is clicked (or hovered over)

  6. Add an event listener to the transparent shape (not the box) to collapse the box on click.
    It’s easier to it on editorX as you have more control over the size.

There’re other ways as well, but this should be easy.