Question

我知道之前有人问过这个问题，因为我记得当我第一次尝试在我的个人网站上重新创建这个效果时，会阅读有关此主题的各种帖子。话虽这么说，这次我找不到这些帖子。我应该保存它们＆gt;：/

所以，我为重复道歉，但我试图做其中一个“点击任何地方但在这里关闭元素叠加”的事情。在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语句：

jQuery

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

但是，显然，如果你单击任何地方，叠加层就会消失。（即使您单击按钮，或尝试复制文本）。它非常烦人，并且不能像我需要的那样工作。

Answer 1

event在Firefox中不是全球性的，就像在IE或Chrome中一样。

一种解决方案是更改您的功能以将事件传递到其中：

function closeProductOverlay(event) {

并更改绑定：

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

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

1 个答案: