文档上的 EventListener('click') 阻止其他 ('click') 工作答案

【问题标题】：EventListener('click') on document prevents other ('click') from working文档上的 EventListener('click') 阻止其他 ('click') 工作
【发布时间】：2014-07-18 14:30:34
【问题描述】：

我想通过单击外部来关闭搜索菜单（包含许多元素）。为此，我制作了一个（onclick）函数来打开/关闭它，并使用一个链接（有效）和一个（onclick）函数来检测它之外的 clics，然后关闭它。问题是，我的第一个函数可以自己工作，但是当我放第二个函数时，什么都不起作用。这就是我到目前为止所得到的：

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，我根本不知道语法）

编辑：按照 Jameel 的建议，在第 14 行的“if”之后添加了“{”，并将第 12 行更改为“var x = document.getElementById(e.target.id)”。现在 e.preventDefault 在第一个函数上工作，但还是这样。

【问题讨论】：

标签： javascript

【解决方案1】：

您需要像这样将 e.target.id 传递给 document.getElementById 方法：

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

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

【讨论】：

按你说的改了x的值，查看控制台日志；我在 if 之后忘记了 { 。修复了这个问题，现在当我单击“链接”时，重定向被阻止，但没有其他任何反应。控制台现在告诉我“不推荐使用 getPreventDefault()。” [jQuery-min]（我不使用？）和“不推荐使用 getUserData() 或 setUserData()。” （我的代码中没有看到，你能找出这个错误的来源吗？）
getPreventDefault() 由 jQuery 方法 preventDefault() 使用。不知道 getUserData 或 setUserData 完全错过了 if 上的 { - 抱歉。也许是一个愚蠢的问题，但是您的页面中是否有一个 id="all" 的元素，或者您是否尝试将 eventlistener 添加到所有元素？
是的，我的下方有一个 div "all"，在某些时候简单地编写 document.getElementById 不起作用，所以我尝试解决它；我猜不是很干净，但如果我用“alert(x);”替换我的函数，它确实有效
我的控制台只返回警告，没有错误。如果我将 'preventDefault()' 替换为 'defaultPrevented()' 就像控制台似乎建议的那样，它不起作用（我的链接仍然是一个链接）。无论如何我不认为 preventDefault 是问题，因为如果我只运行第一个函数，它工作正常。当添加第二个监听器（'click'）时，问题就开始了。
不得不承认我的核心 JS 相当生疏，因为我现在倾向于只使用 jQuery，但为什么不从第二个事件监听器中删除 && !menuframe.contains(x) 而是添加第三个点击事件不会为搜索菜单中的项目传播的侦听器。我可以看到您正在尝试做什么，但认为将包含的元素和容器元素分开处理可能更合乎逻辑。您可以做的另一件事是将 console.log() 调用放入您的代码中，以查看单击元素时实际发生的情况。很抱歉帮不上什么忙。

【解决方案2】：

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

总结一下，点击外部时如何真正关闭一个div？

【讨论】：

第一次点击确实显示了一个新层，通过改变可见性：隐藏；能见度：可见；在 CSS 中。这个
具有最高的 z-index，因此它显示在其余部分之上，我不知道这是否是您所说的“重叠”。新显示的
包含在
中（这是我的整个网站+包括边距），所以我认为第二个功能可以工作......我错了吗？
嗯，您能提供一个jsfiddle 来解决您的问题吗？我在这里看到你的 js 代码没有问题。
我的代码有点大（尤其是 css），所以我对其进行了修剪以仅显示文档的结构，以及 "menuframe" jsfiddle 的 CSS。我所有的 JS 都在元素之间，真的很糟糕吗？她自己的第一个功能工作正常。告诉我它是否有帮助，或者我是否应该添加更多信息