解决/阻止 div层内的div层点击事件冒泡触发的小方法

两个层都绑定了点击事件，但是点击in层的时候，同时也会触发out层的点击事件。但是他并不希望触发out的点击事件，只希望触发in层的点击事件，该怎么处理。页面代码：

<div style="width: 400px;height: 400px;background-color: #678678;" id="outDiv">
    out
    <div style="width: 200px;height: 200px;margin: 50px;background-color: #eaceac;" id="inDiv">in</div>
</div>

解决： 当然，当时就知道，这个解决方案很有问题。但是当时问题有点急，就随手这样解决了，看起来也没出现什么bug。只是代码非常的不优雅。直到今天，读到了《基于MVC的JavaScript Web富应用开发》中的第二章，关于如何取消事件冒泡的方法。才算是比较靠谱的解决了这个问题，代码如下：

inDiv.addEventListener('click',function(e){
       alert('in');
       e.stopPropagation();//终止事件冒泡
},false);
outDiv.addEventListener('click',function(e){
       alert('out');
},false);