jQuery Click 事件在 Mozilla 中不起作用（在 Chrome 中工作）答案

【问题标题】：jQuery Click Event Not Working in Mozilla (Working in Chrome)jQuery Click 事件在 Mozilla 中不起作用（在 Chrome 中工作）
【发布时间】：2015-10-26 18:45:30
【问题描述】：

我知道以前在这里有人问过这个问题，因为我记得当我第一次尝试在我的个人网站上重新创建这种效果时，阅读了有关此主题的各种帖子。话虽如此，这次我找不到适合我一生的帖子。我应该救了他们>:/

所以，我为重复道歉，但我正在尝试做“点击任何地方但在这里关闭元素覆盖”的事情之一。在 Chrome 中可以很好地工作，但在 Mozilla 中效果不佳。最重要的是，我使用它的其他元素运行良好（在 Mozilla 和 Chrome 中），只是不是这个。

jQuery

function closeProductOverlay() {
    if (!$(event.target).closest('#clickControl').length) {
        $('#productOverlay').toggle('fast', 'linear');
    }
}

HTML

<div id="productOverlay" style="display:none;" onclick="closeProductOverlay()">
    <div id="mobiPadding">
        <div id="productContainer">
            <div id="clickControl">
                <!-- This is where I populate items dynamically -->
            </div>
        </div>
    </div>
</div>

正如我所说，我已经将这个概念应用于同一个项目/网站的许多功能，并且它们都可以完美运行。我在我的智慧尽头试图诊断这一点。

我尝试了一些混乱的“修复”，但它们都没有按预期的方式运行。我得到的最接近的是 if 像这样删除 if 语句：

jQuery

function closeProductOverlay() {
    $('#productOverlay').toggle('fast', 'linear');
}

但是，很明显，如果您单击“任何地方”，覆盖就会消失。（即使您正在单击按钮或试图复制文本）。这很烦人，并且不能按我的需要工作。

【问题讨论】：

标签： jquery html google-chrome mozilla

【解决方案1】：

event 在 Firefox 中不像在 IE 或 Chrome 中那样是全局的。

一种解决方案是更改您的函数以将事件传递给它：

function closeProductOverlay(event) {

并更改绑定：

<div id="productOverlay" style="display:none;" onclick="closeProductOverlay(event)">

【讨论】：