Question

我想点击一下搜索菜单（包含众多元素）。为此，我创建了一个（onclick）函数来打开/关闭它，其中一个链接（可以工作）和一个（onclick）函数来检测它外面的数字，并关闭它。问题是，我的第一个功能是单独工作，但是当我放第二个功能时，没有任何作用。这就是我到目前为止所得到的：

document.getElementById('link').addEventListener('click', function(e) {
            menuframe = document.getElementsByClassName('searchframe')[0];
            e.preventDefault(); // On bloque l'action par défaut de cet événement
            if (!menuframe.classList.contains('displayed')) {
                menuframe.classList.add('displayed');
            } else {
                menuframe.classList.remove('displayed');
                link.blur(); }
        }, false);

        document.getElementById('all').addEventListener('click', function (e) {
            var x = document.getElementById.e.target.id,
                menuframe = document.getElementsByClassName('searchframe')[0];
            if (menuframe.classList.contains('displayed') && !menuframe.contains(x))
                menuframe.classList.remove('displayed'); }
        }, false);

我认为它与事件冒泡/捕获有关，试图弄乱true / false和e.stopPropagation（）;没有成功。或许我的代码很糟糕，我是JS的新手。我试着谷歌搜索我能想到的一切，并尝试了各种“修复”，但没有成功。

总结一下，如何在外面点击时关闭div？（如果可能的话，没有jQuery，我根本不知道语法）

编辑：在第14行的'if'之后添加了'{'，并且按照jameel的建议在“var x = document.getElementById（e.target.id）”中更改了第12行。现在e.preventDefault适用于第一个函数，但它仍然是它。

Answer 1

您需要将e.target.id传递给document.getElementById方法，如下所示：

 var x = document.getElementById(e.target.id)

您是否检查过javascript控制台是否有错误？

Answer 2

根据您提出的问题（见下文），我假设您的第一次点击打开/显示一个新图层。新元素是否可能与底层（您所谓的外部）元素重叠，以便它永远不会收到第二次点击？您可以尝试着色区域以检查是否存在重叠，或使用浏览器的调试工具。

总结一下，在外面点击时如何实际关闭div？

文档上的ADDEventListener（'click'）阻止其他（'click'）工作

2 个答案: