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

起因

       有天，同事问我，有一个div层'out'，内含有一个div层'in'。如下：

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

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

权宜之计

       当时正在忙，也没细想解决方法。当然，以前也没写过类似的代码，就只好用了一个很笨的办法，用了一个简单的全局变量，来记录是点击的in层还是out层，然后就解决了这个问题了。代码如下：

            var clickDiv = 'out';
            inDiv.addEventListener('click',function(e){
                clickDiv = 'in';
                alert('in');
            },false);
            outDiv.addEventListener('click',function(e){
                if(clickDiv == 'out')
                    alert('out');
                clickDiv = 'out'
            },false);

而且当时就随手写，根本没用addEventLinstener来绑事件，点击事件直接写在div的onclick=""里面，外面定义了两个点击function。

解决

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

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

       这也算是因为认真读书解决了一个实际遇到的问题吧。写个博客记录一下。  

附件

       示例代码：点击打开链接