我非常了解基于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时才有效,我无法解释。)
非常感谢任何帮助和建议。非常感谢提前。
答案 0 :(得分:2)
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);
}
}