想做个用户控件，焦点在<div>外就消失

.net 2.0 ,想做个用户控件，里面有个TreeView,点击按钮弹出这个树，
要求：当鼠标点击这个用户控件之外，树消失。（点击树的CheckBox不消失）应该用到的是js的脚本，TreeView是服务器控件，该怎么做？

解决方案 »

  1.   

    谢谢你的回答，请问怎样判断鼠标的位置。我的用户控件使用
    <div id="Goods3" style="z-index: 300; progid: DXImageTransform.Microsoft.DropShadow(Color=#BFBFBF,OffX=4,OffY=4);
        left: 10px; position: absolute; top: 700px; background-color: powderblue; visibility: hidden;"
        width="300">
        <table>
            <tr>
                <td align="left" bgcolor="black">
                    </td>
            </tr>
            <tr>
                <td>
                    <asp:TreeView ID="TreeView3" runat="server" OnTreeNodePopulate="TreeView3_TreeNodePopulate"
                        ShowLines="True" ShowCheckBoxes="Root">
                        <Nodes>
                            <asp:TreeNode PopulateOnDemand="True" Text="区域" Value="-1" ShowCheckBox="False"></asp:TreeNode>
                        </Nodes>
                    </asp:TreeView>
                </td>
            </tr>
        </table>
    </div>
      

  2.   

    怎么获得这个<div>的位置阿？
      

  3.   

    clientX，clientY
    网上找个确定鼠标位置的js代码看下就知道了
      

  4.   

    <div>的 onmouseover 和 onmouseout 事件里控制 是否显示就可以了。
      

  5.   

    不用知道div的位置。如果div有id的话，判断点击事件是否在div内就可以了。<html>
    <head>
    <style type="text/css">
    <!--
    .mainBox {
    float: left;
    height: 300px;
    width: 100%;
    }
    .subBox1 {
    float: left;
    height: 300px;
    width: 50%;
    background-color:blue;
    }.subBox2 {
    padding: 0px;
    float: left;
    height: 300px;
    width: 50%;
    background-color:black;
    }.subBox4 {
    float: left;
    height: 300px;
    width: 50%;
    background-color:red;
    }.subBox3 {
    float: left;
    height: 300px;
    width: 50%;
    background-color:green;
    }
    -->
    </style>
    <script>
    <!--
    // 仅适合IE
    document.attachEvent("onclick", function(){ _Foo("subBox1") } );
    _Foo = function(sDivId){
    var oTarget = window.event.srcElement;
    if( sDivId == oTarget.id )
    alert("should do something");
    else
        alert("do nothing");
    }
    -->
    </script>
    </head>
    <body>
    <div class="mainBox">
    <div id="subBox1" class="subBox1">
    </div>
    <div id="subBox2" class="subBox2">
    </div>
    </div>
    <div class="mainBox">
    <div id="subBox3" class="subBox3">
    </div>
    <div id="subBox4" class="subBox4">
    </div>
    </div>
    </div>
    </body>
    </html>