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

Question

I am very aware of the JQuery-based responses to this question - please do not point me at those. 我非常了解基于JQuery的对此问题的回答-请不要针对这些问题。 I need a pure JavaScript solution to this. 我需要一个纯JavaScript解决方案。

Here's my particular quandary: 这是我的特别困惑：

I create a button using a div which users can click to open a breadcrumbs view: 我使用div创建一个按钮，用户可以单击该按钮以打开面包屑视图：

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

Here's what I have so far to show the div: 到目前为止，这是我可以显示div的内容：

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

So far so good. 到现在为止还挺好。

I now need to be able to close that breadcrumbs view by clicking the button again (that's covered already) but also by clicking anywhere else in the document, except the breadcrumbs div itself. 现在，我需要能够再次单击该按钮（已经覆盖）来关闭该面包屑视图，而且还需要单击该文档中除面包屑div本身以外的其他任何位置。

And this is what I can't solve. 这是我无法解决的。 Any document click event handler (no matter how primitive) I add closes the div before the browser has had time to render it. 我添加的任何文档单击事件处理程序（无论多么原始）都将在浏览器没有时间呈现其之前关闭div。

For example: 例如：

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

(Actually, the above example ONLY works if I click the div, which I can't explain.) （实际上，上面的示例仅在单击div时有效，我无法解释。）

Any help and advice much appreciated. 任何帮助和建议，不胜感激。 Many thanks in advance. 提前谢谢了。

Answer 1

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

This is very close. 这非常接近。 You need to add an on-click handler to the <body> , and then filter out any events which have the flyout in their DOM hierarchy. 您需要在<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