新浪微博的表情框效果怎么做的？求高手。

新浪微博相信不少人都用过。先在我想模仿他的表情框效果（不只是表情框，包括那个文本框下面的所有小工具按钮都是这效果，嗯，腾讯微博也有这效果）：大概如下:1、在点击的时候在指定的位置显示表情框。（已完成）
2、当鼠标点击页面其他任何非弹出框区域时，该弹出框隐藏。（未完成）
我遇到的问题是：
1、我试图在document中添加了click事件，鼠标单击时我隐藏所有的弹出框，但也因此把我想要弹出的表情框同样的隐藏了，看起来就像这个表情框没有显示过似的。我用alert测试，发现事实上这个表情框是显示过的，不过又被document的点击事件给隐藏了。
2、我试图在document的点击事件中判断：
例如：我使用event.target.id得到当前点击对象的id，如果id!=表情框最外层DIV的id，那么就执行隐藏。但问题是，如果我点击该DIV内部的子元素呢？那也同样的被隐藏掉了，显然这不是我要的效果。那么要连着该元素的子元素一起判断吗？似乎太麻烦了。 而且我可以预想到，这样做一定问题多多，相当不稳定。
不知道各位JS 大大，这种效果怎么做？小弟JS太烂，是在想不出怎么做。在此给浏览本贴的大哥大姐致谢了。