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后，通过单击其他位置打开它后单击关闭

1 个答案: