调试易

<a href="#" onclick="return showReply(event)">回复</a>
<div id="dvReply" style="display:none"><textarea></textarea><br /><input type="button" value="回复" /></div>
         <script type="text/javascript">
             function showReply(e) {
                 var dv = document.getElementById('dvReply');
                 dv.style.display = dv.style.display == 'none' ? 'block' : 'none';
                 if (e.stopPropagation) e.stopPropagation();
                 e.cancelBubble = true;
                 return false;
             }
             document.onclick = function (e) {
                 e = e || window.event;
                 var o = e.target || e.srcElement;
                 if (o.id != 'dvReply' && o.parentNode.id != 'dvReply') document.getElementById('dvReply').style.display = 'none';
             }
        </script>

    function showReply(e) {//展开回复容器用的，e为事件对象，用于阻止事件冒泡的，不执行document.onclick注册的点击事件
        var dv = document.getElementById('dvReply'); //获取回复容器
        dv.style.display = dv.style.display == 'none' ? 'block' : 'none'; //根据状态判断如果原来隐藏就显示出来，显示的就隐藏起来，切换状态
        if (e.stopPropagation) e.stopPropagation(); //firefox阻止事件冒泡
        e.cancelBubble = true; //IE的
        return false; //阻止执行a的href链接到#
    }
    document.onclick = function (e) {//给document注册点击事件，以便获取到当前点击对象
        e = e || window.event;//获取事件对象
        var o = e.target || e.srcElement; //获取点击到的对象,w3c浏览器和ie不一样，所以要获取2个属性取或等到实际的对象
        //下面就是判断点击对象是否是回复容器或者回复容器里面的子对象的，如果是就不隐藏回复容器，不是则隐藏
        if (o.id != 'dvReply' && o.parentNode.id != 'dvReply') document.getElementById('dvReply').style.display = 'none';
    }

可是parentNode只能获得我的上层父节点，可是如果嵌套了10层DIV的话 判断岂不是要很麻烦？

通过当前对象遍历parentNode看是否有父亲节点为容器id的节点来做
<a href="#" onclick="return showReply(event)">回复</a>
<div id="dvReply" style="display:none"><div><div><div><textarea></textarea><br /><input type="button" value="回复" /></div></div></div></div>
<script type="text/javascript">
    function showReply(e) {
        var dv = document.getElementById('dvReply');
        dv.style.display = dv.style.display == 'none' ? 'block' : 'none';
        if (e.stopPropagation) e.stopPropagation();
        e.cancelBubble = true;
        return false;
    }
    function isContainer(o, pNodeId) {
        if (o.id == pNodeId) return true;
        while (o = o.parentNode) if (o.id == pNodeId) return true;
        return false;
    }
    document.onclick = function (e) {
        e = e || window.event;
        var o = e.target || e.srcElement;
        if (!isContainer(o, 'dvReply')) document.getElementById('dvReply').style.display = 'none';
    }
</script>

简单的js效果，楼主可以看看jQuery的demo页面