toggle - how to make javascript object disappear when click on rest of page

How to change the following code so when clicking anywhere on the web page, the line "This is foo" will disappear, right now I have to click "Click here" to make it disappear.

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

How to change the following code so when clicking anywhere on the web page, the line "This is foo" will disappear, right now I have to click "Click here" to make it disappear.

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

Share Improve this question asked Nov 7, 2013 at 14:18 Cindy Turlington 2,5273 gold badges18 silver badges21 bronze badges

you may wish to use something other than an <a> tag for a button, otherwise you need a preventDefault(); mechanism in your function or a hack like onclick="toggle_visibility('foo');return false;" – technosaurus Commented Nov 7, 2013 at 14:56

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

You'll need to bind the click event to the body element for it to fire when you click anywhere on the page.

Try to use document object for attaching event handler

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

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

And this bit of css:

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

http://jsfiddle/57ZpS/8/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

toggle - how to make javascript object disappear when click on rest of page - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)