div选取

[sinat_38366328]

想要实现一个鼠标自动选取div的效果，即当鼠标在哪个div上就显示哪个div的边框线，优先选择最下层的，这个功能类似chrome调试工具的鼠标自动选取元素功能。
但是现在有个问题搞不定：如果div有多层，就无法选取最下层div，只能选择父div，用什么方法能够实现这个功能呢，chrome调试工具是如何做到的呢，这个功能的原理是什么呢？

[斯洛文尼亚旅游]

<style>
    div{margin:10px;padding:10px;width:50%;height:50%}
</style>
<div id="dv">5
    <div>4
        <div>3
            <div>2
                <div>
                    1
                </div>

            </div>

        </div>

    </div>
</div>
<script>
    divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++)
        divs[i].onmouseover = divs[i].onmouseout = function (e) {
            e = e || window.event;
            e.stopPropagation && e.stopPropagation();
            e.cancelBubble = true;
            this.style.border = e.type == 'mouseout'?'none':'solid 1px #000'
    }
</script>

[TOOOOOG]

应该在添加点击事件之后阻止冒泡吧