js实现点击不是这个元素的任何地方，该元素实现隐藏

今天想实现这个一个功能：

网站首页的搜索框，不用的时候是一个icon的图标，用户点击的时候搜索框出现，用户不想搜索了就会点击其他的地方，这个时候搜索框需要复原，也就是搜索框隐藏和搜索icon显示。

html代码

<i class="seach_icon hide"></i>
        <div class="seachbox">
          <form action="" method="post">
            <input type="text" name="chats" id="chats" placeholder="请输入..." />
            <input type="submit" value="搜索"/>
          </form>
        </div>

js代码：

<script type="text/javascript">
          $(function(){
             $(document).click(function () {
                    $(".seachbox").hide();
                    $(".seach_icon").show();
             });
              $(".seach_icon").on("click", function (event) {
                    //取消事件冒泡
                  var e = arguments.callee.caller.arguments[0] || event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容
                  if (e && e.stopPropagation) {
                       // this code is for Mozilla and Opera
                       $(this).hide();
              $(".seachbox").show();
                      e.stopPropagation();
                  } else if (window.event) {
                    // this code is for IE
                    $(this).hide();
              $(".seachbox").show();
                      window.event.cancelBubble = true;
                }
            });
          })
</script>