点击外部关闭响应式菜单仅Firefox失效，如何排查修复？

Hey there! Let's break down why your click-outside-to-close menu isn't working in Firefox, even though it runs smoothly in Chrome and desktop Safari.

First, here's your original code for reference:

$(function closeMenu() { 
  $('.list-item').removeClass('activeItem'); 
  $('.showSubMenu').removeClass('showSubMenu'); 
  $('input[type=checkbox]').prop('checked', false); 
  $('#burger').removeClass('change'); 
});
$('html').on('click', function(e) { closeMenu(); });
$('.list-item, .showSubMenu, #burger, #menuToggle').click( function(e) { e.stopPropagation(); });

问题根源 #

The core issue lies in how Firefox handles click events on the <html> element, which differs from Chrome/Safari:

• Chrome and Safari default to making the <html> element fill the entire viewport. So clicking any blank page area triggers the <html> click event without issue.
• In Firefox, though, <html> doesn't automatically occupy the full viewport height if your page content is shorter than the screen. When you click a blank spot, you're actually clicking the <body> element, and this event doesn't reliably bubble up to <html> in all scenarios. That's why your closeMenu() function never fires when clicking outside the menu in Firefox.

A minor secondary note: Wrapping closeMenu() inside $(function(){...}) works for scoping, but the <html> event binding is the main culprit here.

修复方案 #

The simplest fix is to bind your click-outside handler to document instead of <html>—since document always covers the entire page, regardless of content height or browser quirks. Here's the adjusted code:

// Define the closeMenu function for easy access
function closeMenu() { 
  $('.list-item').removeClass('activeItem'); 
  $('.showSubMenu').removeClass('showSubMenu'); 
  $('input[type=checkbox]').prop('checked', false); 
  $('#burger').removeClass('change'); 
}

// Initialize once the DOM is fully loaded
$(function() {
  // Bind click-outside logic to document instead of html
  $(document).on('click', function() {
    closeMenu();
  });

  // Prevent menu-related elements from triggering the close action
  $('.list-item, .showSubMenu, #burger, #menuToggle, input[type=checkbox]').click(function(e) {
    e.stopPropagation();
  });
});

Extra Tips for Firefox Compatibility #

• Ensure full viewport coverage: Add this CSS to guarantee <html> and <body> fill the screen (useful if you need <html> for other events later):

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

• Check checkbox handling: In rare cases, Firefox might process prop('checked', false) differently. If the checkbox state still misbehaves, try directly setting the DOM property:

$('input[type=checkbox]').each(function() {
  this.checked = false;
});

• Verify no conflicting handlers: Make sure no other scripts on your page call e.stopImmediatePropagation() on menu elements—this would block your stopPropagation() from working as intended.

内容的提问来源于stack exchange，提问作者Cardguy