Question

如何更改以下代码，以便在点击网页上的任何位置时，“This is foo”这一行将消失，此时我必须点击“点击此处”使其消失。

<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>

Answer 1

您需要将点击事件绑定到body元素，以便在您点击页面上的任意位置时触发该事件。

Answer 2

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

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

Answer 3

HTML：

<body onclick="foo();">
<a href="#" onclick="toggle_visibility('foo');">Click here</a>

    <div id="foo" style="display:none;" >This is foo</div>
</body>

JS：

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;
}

这一点css：

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

http://jsfiddle.net/57ZpS/8/

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

3 个答案: