jq效果 点击隐藏和显示（组织冒泡事件）

一个button按钮，当我点击button后弹出DIV层，

当我点击DIV层以外的地方时候把DIV隐藏

大概代码如下：

    <input type="button" id="js_button" />
    <div id="js_div" style="width: 100px; height: 100px;  display: none">
    </div>
    <script type="text/javascript">
        $(document).ready(
     function () {
         $("#js_button").click(function (e) {
             $("#js_div").show(300);
             /*阻止冒泡事件*/
             e = window.event || e;
             if (e.stopPropagation) {
                 e.stopPropagation();
             } else {
                 e.cancelBubble = true;
             }

         });
         $("#js_div").click(function (e) {
             /*阻止冒泡事件*/
             e = window.event || e;
             if (e.stopPropagation) {
                 e.stopPropagation();
             } else {
                 e.cancelBubble = true;
             }
         });
         $(document).click(function () {
             $("#js_div").hide(300);
         });
     }
     );
    </script>

jq效果 点击隐藏和显示（组织冒泡事件）