使用纯JavaScript关闭div，方法是在div之后单击off'；在别处点击一下就打开了

我非常了解基于JQuery对这个问题的回答——请不要告诉我这些。我需要一个纯JavaScript解决方案

以下是我的困惑：

我使用div创建了一个按钮，用户可以单击该按钮打开面包屑视图：

<div id="breadcrumbs_icon" class="dialog_button" data-tooltip="Breadcrumbs" onclick="showDiv()">
    <span class="breadcrumbs_icon" ></span>
</div>

到目前为止还不错

我现在需要能够通过再次单击按钮（已经包括）来关闭该breadcrumbs视图，但也可以通过单击文档中除breadcrumbs div本身之外的任何其他位置来关闭该视图

这是我无法解决的问题。我添加的任何文档单击事件处理程序（无论多么原始）都会在浏览器渲染之前关闭div

例如：

document.getElementById('breadcrumbs_flyout').onclick = function(e) {
    if(e.target != document.getElementById('breadcrumbs_flyout')) {
        document.getElementById('breadcrumbs_flyout').style.display = 'none';
    }
}

（实际上，上面的示例只有在我单击div时才有效，我无法解释这一点。）

非常感谢您的帮助和建议。非常感谢

document.getElementById('breadcrumbs_flyout').onclick = function(e) {
    if(e.target != document.getElementById('breadcrumbs_flyout')) {
        document.getElementById('breadcrumbs_flyout').style.display = 'none';
    }
}

这非常接近。您需要向

添加一个点击处理程序，然后过滤掉在DOM层次结构中具有弹出按钮的所有事件

document.body.onclick = function(e) {
    if(!isChildOfFlyout(e.target)) {
        document.getElementById('breadcrumbs_flyout').style.display = 'none';

        // stop event propagation
        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation();
        }
        // clean up the handler (if appropriate)
        document.body.onClick = null;
    }
}

function isChildOfFlyout(node) {
  if (node === document.body) {
    return false;
  } else if (node === document.getElementById('breadcrumbs_flyout')) {
    return true;
  } else {
    return isChildOfFlyout(node.parentNode);
  }
}

---

谢谢你的回复，安德鲁！不幸的是，这对我也不起作用。我得到了与之前相同的结果：div被立即隐藏，因为点击被注册为在触发隐藏的div之外，有效地在浏览器中呈现之前。好的，我稍微修改了ischildoffyout函数中的if语句，添加：}else if（（node==document.getElementById）（'breadcrumbs_icon'）和&（document.getElementById（'breadcrumbs_flyout'）。style.display=='block'）{返回true；这似乎足以捕获不同的条件并在需要时显示/隐藏div。谢谢你带我到那里，伙计！

document.body.onclick = function(e) {
    if(!isChildOfFlyout(e.target)) {
        document.getElementById('breadcrumbs_flyout').style.display = 'none';

        // stop event propagation
        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation();
        }
        // clean up the handler (if appropriate)
        document.body.onClick = null;
    }
}

function isChildOfFlyout(node) {
  if (node === document.body) {
    return false;
  } else if (node === document.getElementById('breadcrumbs_flyout')) {
    return true;
  } else {
    return isChildOfFlyout(node.parentNode);
  }
}