javascript 事件的问题

<input type='text' onclick='openDialog()'> 
我有个输入框，当我点击输入框时，就会在输入框的下面跳出一个div，我希望当我再点击输入框意外的地方（以外的地方不包括div的地方）时，这个div消失。请问该用什么事件

解决方案 »

  1.   

    你可以这样实现：1>给div绑定一个click事件，不执行任何操作(记得 return FALSE ,防止事件冒泡)2>在给document绑定一个click事件,影藏div3>openDialog（）函数里面也要return false;
      

  2.   


    <html>
    <head>
        <title>zjpdemo </title>    <script>
            function fn(flag) {
                if (flag == 0) {
                    document.getElementById("openDiv").style.display = "block";
                } else {
                    document.getElementById("openDiv").style.display = "none";            }
            };
        </script></head>
    <body>
        <input type="text" onblur="fn(1)" onfocus="fn(0)" style="width:150">
        <div id="openDiv" style="display: none; width: 150; height: 150; background-color: Red">
            111111111111
        </div>
    </body>
    </html>
      

  3.   

    二楼的谢谢回帖！但是没有达到我要的效果
    当我点击div时，div消失了，我要的效果是点击input和div时不消失，点击其它的地方才消失。
    因为我点击，div出来后，要操作div的内容。使用不能让它消失一楼的是个好办法。但是有些复杂！
      

  4.   

    可以根据事件源target来判断是否消失
      

  5.   

    <html>
    <head>
        <title>zjpdemo </title>    <script>
            function fn(flag) {
                if (flag == 0) {
                    document.getElementById("openDiv").style.display = "block";
                } else {
                    document.getElementById("openDiv").style.display = "none";            }
            };
        </script></head>
    <body>
        <input type="text" onFocus="fn(0)" style="width:150">
        <div id="openDiv" style="display: none; width: 150; height: 150; background-color: Red" onBlur="fn(1)" >
            111111111111
        </div>
    </body>
    </html>
    修改二楼的    点击文本框的时候DIV出现，然后点击除文本框和DIV以外的区域，DIV消失(但是必须要先点击一下DIV，才能实现这个效果！一楼的确实是个好办法，但是比较麻烦！)
      

  6.   

    document.body.onclick=function(){document.getElementById("openDiv").style.display = "none";}
      

  7.   

    再补充一下，你可以在DIV上加一个关闭按钮 <input type="button" onFocus="fn(1)" value="关闭">
    <html>
    <head>
        <title>zjpdemo </title>    <script>
            function fn(flag) {
                if (flag == 0) {
                    document.getElementById("openDiv").style.display = "block";
                } else {
                    document.getElementById("openDiv").style.display = "none";            }
            };
        </script></head>
    <body>
        <input type="text" onFocus="fn(0)" style="width:150">
        <div id="openDiv" style="display: none; width: 150; height: 150; background-color: Red" onBlur="fn(1)" >
            这里是要显示的信息，点击关闭按钮即可关闭<input type="button" onFocus="fn(1)" value="关闭">
        </div>
    </body>
    </html>