0

I have a a pop up menu which has a close button that works fine. I'm also trying to close the menu when a user clicks outside of the box too.

I have tried using an if statement inside closeMenu() which checks if the event.target wasn't the button element but it doesn't seem to work.

Any ideas or direction is appreciated.

var button = document.createElement('DIV');
button.className = "DoorSelector--FamilyOption";
var event_func = (parent == null) ? this.closeMenu.bind(this, close_container) : this.createMenuOptions.bind(this, parent, null);
button.addEventListener('click', event_func);

Menu.prototype.closeMenu = function(container, event) {
    event.preventDefault();
    event.stopPropagation();

    container.classList.remove('show');
};

The full code can be seen here if needed.

Thanks

Madness
  • 618
  • 2
  • 7
  • 22

1 Answers1

2

You add your click-listener on button. Callback function closeMenu will invoke only if button is clicked, so if you click outside nothing happens. You should add event listener on "outside" :) On <body> for example

user2554865
  • 365
  • 1
  • 9