如何使javascript对象在单击页面其余部分时消失_Javascript_Toggle

如何使javascript对象在单击页面其余部分时消失

javascript

如何使javascript对象在单击页面其余部分时消失,javascript,toggle,Javascript,Toggle,如何更改以下代码，以便在单击网页上的任何位置时，“This is foo”一行将消失，现在我必须单击“click here”使其消失 <html> <script type="text/javascript"> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block')

如何更改以下代码，以便在单击网页上的任何位置时，“This is foo”一行将消失，现在我必须单击“click here”使其消失

<html>
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
<body>
<a href="#" onclick="toggle_visibility('foo');">Click here</a>
<div id="foo">This is foo</div>
</body>
</html>


我是福

您需要将click事件绑定到

主体

元素，以便在单击页面上的任何位置时触发该元素。

尝试使用document对象附加事件处理程序

document.onclick = function(){
   var e = document.getElementById('foo');
   e.style.display = ((e.style.display != 'none') ? 'none' : 'block');
};

HTML:

还有这一点css：

body,html
{
    width:100%;
    height:100%;
}

但我想将click事件绑定到按钮，如下所示well@ArgonneFarm ... 这是多余的，因为你的按钮在主体中，但是如果你想在以后更改/删除全局单击行为，你可以自由地这样做。我的意思是当单击按钮时，它会切换，但当单击主体时，它总是隐藏，不toggle@ArgonneFarm：这需要两个独立的事件：一个在始终隐藏元素的主体上，另一个在切换元素的按钮上。您可能希望为按钮使用

标记以外的其他标记，否则需要

默认值（）函数中的机制或类似于onclick=“toggle_visibility（'foo'）；return false；“
Mageek，我试过了，它很有效，除了在第一页加载时，需要单击“click here”两次以使“This is foo”消失，之后，一切都很好，只需单击一次即可，知道吗？是的，必须为div指定style=“display:block；”（而不是我的示例中的none）。（如果您不想使用这种样式，还有另一种方法）
var b = false;

function toggle_visibility(id) {
    var e = document.getElementById(id);
     if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    b = true;
}

function foo() {
    var e = document.getElementById('foo');
    if(!b) e.style.display = 'none';
    b=false;
}

body,html
{
    width:100%;
    height:100%;
}