外部点击关闭菜单仅在 Firefox 中不起作用？答案

【问题标题】：Close menu on outside click doesn't work only in Firefox?外部点击关闭菜单仅在 Firefox 中不起作用？
【发布时间】：2018-04-06 07:08:33
【问题描述】：

$(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();
	});

此 JS 在 Chrome（桌面和移动）和 Safari（仅限桌面）中运行并关闭响应式菜单，但不是 Firefox！？？怎么了？语法错误？非常感谢任何智慧。

在此处查看完整代码：（在 Chrome 和 Safari 桌面上工作）： http://cardscreative.com/cc2017/test444.html

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这个

$(document).on('click','body *',function(){
         closeMenu(); 
});

【讨论】：

尝试过的css高度：100%；首先是下面的解决方案，它起作用了，但无论如何我将功能更改为您上面的功能，因为它似乎更包罗万象。去除高度：100%；再次打破它。下一个问题是它仍然无法在 safari mobile 上运行。

【解决方案2】：

看起来body 只占用了 Mozilla 中搜索栏所在的部分，因此如果您点击其他任何地方，它不会注册为点击了body。如果您将body 设置为height: 100%，它似乎可以工作。

【讨论】：

首先尝试了您的解决方案，它奏效了......而且更简单。但是，它仍然无法在 ios 的 Safari 移动版本中使用？想法？谢谢！
不是 100% 肯定，但 this answer 表示 Safari Mobile 应该支持 vh，它对应于视口的高度，在这种情况下在功能上是等效的。

【解决方案3】：

查看您发布的示例网站 (http://cardscreative.com/cc2017/test444.js) 的 JavaScript，有以下代码：

$(document.body).on('click', function(e) { ... }

对于 Firefox，文档正文仅占据其内容的全部高度，而不是窗口的全部高度。因此，此函数不会附加到内容<body> 之外发生的点击事件。在您的示例网站中，内容正文由导航栏组成。

可以通过以下更改解决此问题：

$(document).on('click', ...

此更改会将函数附加到文档中的所有点击，而不仅仅是正文。

（另外，您的问题是 $('html').on('click', ...。您应该更新您的问题以反映网站的 JavaScript。）

【讨论】：