如何点击div外部关闭菜单？纯JS实现点击外部关闭弹窗菜单方法

Hey there! This is such a common and useful UI pattern, and implementing it with vanilla JavaScript is totally straightforward—no frameworks required. Let’s break down how to make this work, including how to fit it into your existing code.

Core Idea #

The logic boils down to three simple steps:

• Listen for click events across the entire document
• When a click happens, check if the target is inside your menu/modal or the element that triggers it (like a toggle button)
• If the click is outside both, hide the menu

Step-by-Step Implementation #

Let’s start with a basic example you can adapt to your existing setup. First, here’s a typical HTML structure:

<button id="menuToggle">Open Menu</button>
<div id="popupMenu" class="hidden">
  <a href="#">Profile</a>
  <a href="#">Settings</a>
  <a href="#">Log Out</a>
</div>

And some quick CSS to handle visibility:

.hidden {
  display: none;
}
#popupMenu {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  padding: 1rem;
}

Now the JavaScript that makes the magic happen:

// Grab references to your elements
const menuToggle = document.getElementById('menuToggle');
const popupMenu = document.getElementById('popupMenu');

// Toggle menu visibility and manage click listeners
function toggleMenu() {
  popupMenu.classList.toggle('hidden');
  
  // Only listen for outside clicks when the menu is open
  if (!popupMenu.classList.contains('hidden')) {
    document.addEventListener('click', handleOutsideClick);
  } else {
    document.removeEventListener('click', handleOutsideClick);
  }
}

// Check if the click is outside the menu/toggle
function handleOutsideClick(event) {
  // Skip if the click is inside the menu or on the toggle button
  if (!popupMenu.contains(event.target) && event.target !== menuToggle) {
    // Close the menu and clean up the listener
    popupMenu.classList.add('hidden');
    document.removeEventListener('click', handleOutsideClick);
  }
}

// Attach the toggle function to your button
menuToggle.addEventListener('click', toggleMenu);

Key Details to Keep in Mind #

• Efficient Listener Management: We only attach the document-wide click listener when the menu is open—no need to waste resources listening when the menu is hidden.
• contains() Method: This handy method checks if an element is a descendant of another (including the element itself), so it works even if you click nested items inside the menu.
• Avoiding Double Triggers: We exclude the toggle button from the "outside" check, so clicking the button to close doesn’t fire the outside-click logic twice.

Adapting to Your Existing Code #

If you already have code that handles opening/closing your menu, you just need to tweak it to add the outside-click logic:

1. Wherever you show the menu, add document.addEventListener('click', handleOutsideClick)
2. Wherever you hide the menu, add document.removeEventListener('click', handleOutsideClick)
3. Write the handleOutsideClick function to check if the click is outside your menu container and trigger elements.

For example, if your existing code looks like this:

// My current menu code
const myMenu = document.querySelector('.user-menu');
document.querySelector('.menu-btn').addEventListener('click', () => {
myMenu.style.display = 'block';
});

You’d update it like this:

const myMenu = document.querySelector('.user-menu');
const menuBtn = document.querySelector('.menu-btn');

function handleOutsideClick(event) {
  if (!myMenu.contains(event.target) && event.target !== menuBtn) {
    myMenu.style.display = 'none';
    document.removeEventListener('click', handleOutsideClick);
  }
}

menuBtn.addEventListener('click', () => {
  myMenu.style.display = 'block';
  // Add outside click listener when menu opens
  document.addEventListener('click', handleOutsideClick);
});

Bonus: Accessibility Touch #

For a better user experience, add support for closing the menu with the Escape key:

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && !popupMenu.classList.contains('hidden')) {
    toggleMenu();
  }
});

内容的提问来源于stack exchange，提问作者Jean-Pierre64