使用纯JavaScript关闭div，然后在其他位置单击以单击以关闭div

Question

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

这是我的特别困惑：

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

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

到目前为止，这是我可以显示div的内容：

function showDiv()
{   
    var breadcrumbsDiv = document.getElementById("breadcrumbs_flyout");
    if (breadcrumbsDiv.style.display=="none") {
        breadcrumbsDiv.style.display="block";
    }
    else {
        breadcrumbsDiv.style.display="none";
    }
}

到现在为止还挺好。

现在，我需要能够再次单击该按钮（已经覆盖）来关闭该面包屑视图，而且还需要单击该文档中除面包屑div本身以外的其他任何位置。

这是我无法解决的。 我添加的任何文档单击事件处理程序（无论多么原始）都将在浏览器没有时间呈现其之前关闭div。

例如：

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

（实际上，上面的示例仅在单击div时有效，我无法解释。）

任何帮助和建议，不胜感激。 提前谢谢了。

Answer 1

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

这非常接近。 您需要在<body>上添加一个单击处理程序，然后过滤掉在其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);
  }
}

使用纯JavaScript关闭div，然后在其他位置单击以单击以关闭div

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-20 19:22:27

使用纯JavaScript关闭div，然后在其他位置单击以单击以关闭div

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-20 19:22:27

解决方案1
2 已采纳 2016-06-20 19:22:27